/* ===========================================================
   Raullfit — design tokens
   Fuente de verdad técnica. Importa este archivo y usa var(--…)
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap");

:root {
  /* ---- Color base ---- */
  --bg: #F7F8F5;            /* hueso */
  --surface-dark: #0C0D0E;  /* grafito */
  --overlay-dark: #0A0B0C;  /* grafito overlay (carrusel) */
  --ink: #141618;           /* tinta */
  --ink-2: #6E7479;         /* gris medio */
  --ink-3: #9AA0A6;         /* gris claro: no para texto sobre claro */

  /* ---- Glucosa (semánticos) ---- */
  --green: #7DC242;         /* en rango: sobre oscuro, gráficas, halos */
  --green-solid: #4C8A28;   /* botones y acentos sobre claro (texto ≥19px bold) */
  --green-ink: #3B6E1F;     /* derivado: texto verde pequeño sobre claro */
  --amber: #FFC20E;         /* aviso: solo semántico */
  --orange: #F26A21;        /* fuera de rango: solo semántico */

  /* ---- Tipografía ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.375rem;    /* 22 */
  --fs-xl: 1.875rem;    /* 30 */
  --fs-2xl: 2.5rem;     /* 40 */
  --fs-3xl: clamp(2.5rem, 6vw, 4.25rem);
  --lh-tight: 1.08;
  --lh-body: 1.55;
  --tracking-display: -0.02em;

  /* ---- Liquid glass ---- */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(255, 255, 255, 0.08);
  --glass-brd: rgba(255, 255, 255, 0.75);
  --glass-brd-dark: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(28px) saturate(180%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 22, 24, 0.04),
    0 12px 40px rgba(20, 22, 24, 0.08);
  --glass-shadow-dark:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.35);

  /* ---- Forma y espacio ---- */
  --radius: 26px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --maxw-text: 68ch;

  /* ---- Fondos ---- */
  --halo-light:
    radial-gradient(60% 50% at 15% 10%, rgba(125, 194, 66, 0.18), transparent 70%),
    radial-gradient(45% 40% at 90% 85%, rgba(255, 194, 14, 0.12), transparent 70%);
  --halo-dark:
    radial-gradient(60% 55% at 20% 0%, rgba(125, 194, 66, 0.22), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(125, 194, 66, 0.10), transparent 70%);
  --grain-opacity: 0.035;

  /* ---- Firma ---- */
  --tricolor: linear-gradient(90deg,
    var(--green) 0 77%, var(--amber) 77% 97%, var(--orange) 97% 100%);
}

/* ---- Utilidades base ---- */
.rf-glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.rf-dark .rf-glass,
.rf-glass--dark {
  background: var(--glass-dark);
  border-color: var(--glass-brd-dark);
  box-shadow: var(--glass-shadow-dark);
}
.rf-tricolor {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--tricolor);
}