/* ============================================================================
   Recomendly - sistema visual (tokens). Un solo archivo, claro + oscuro.
   Marca propia de Recomendly. NO es la paleta ni la tipografía de Kinara.
   Color en OKLCH (perceptualmente uniforme). Neutros tintados hacia el ámbar
   de marca (hue ~75-80) a muy baja saturación, para cohesión subconsciente.

   Concepto: Recomendly es un instrumento de medición franco y sereno. El ámbar
   es el "foco" (ser recomendado = estar bajo el reflector); se usa con mesura
   (regla 60/30/10). El calor de la marca lo cargan el acento y la tipografía,
   no un fondo crema (anti-patrón de IA).
   ============================================================================ */

:root {
  /* ---- Tipografía ---- */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
    Menlo, Consolas, monospace;

  /* Escala fluida para titulares de marketing; fija para cuerpo/UI.
     Techo del H1 por debajo de 6rem (no gritar). Relación ~1.25-1.3. */
  --text-xs: 0.8125rem;   /* 13px - solo meta no esencial */
  --text-sm: 0.875rem;    /* 14px - UI secundaria */
  --text-base: 1rem;      /* 16px - cuerpo (mínimo legible) */
  --text-md: 1.0625rem;   /* 17px - cuerpo de marketing */
  --text-lg: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --h3: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --h2: clamp(1.85rem, 1.5rem + 1.75vw, 2.9rem);
  --h1: clamp(2.4rem, 1.85rem + 2.75vw, 4rem);     /* máx 64px */
  --display: clamp(2.6rem, 1.9rem + 3.5vw, 4.6rem); /* máx ~74px */

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --lh-relaxed: 1.7;
  --tracking-display: -0.02em;  /* piso: no por debajo de -0.04em */
  --tracking-tight: -0.011em;
  --tracking-label: 0.08em;     /* mayúsculas cortas */

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;

  /* ---- Espaciado (base 4pt), nombres semánticos ---- */
  --space-2xs: 0.25rem; /* 4 */
  --space-xs: 0.5rem;   /* 8 */
  --space-sm: 0.75rem;  /* 12 */
  --space-md: 1rem;     /* 16 */
  --space-lg: 1.5rem;   /* 24 */
  --space-xl: 2rem;     /* 32 */
  --space-2xl: 3rem;    /* 48 */
  --space-3xl: 4rem;    /* 64 */
  --space-4xl: 6rem;    /* 96 */
  --space-5xl: 8rem;    /* 128 */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* ---- Layout ---- */
  --container: 70rem;       /* 1120px contenido */
  --container-wide: 80rem;  /* 1280px */
  --container-prose: 42rem; /* ~65-72ch de medida */
  --gutter: clamp(1.1rem, 5vw, 2.5rem);

  /* ---- Radios (regla: contenedores 14px, cajas grandes 20px,
          entradas 10px, interactivos píldora) ---- */
  --radius-sm: 0.625rem; /* 10 - inputs, chips */
  --radius-md: 0.875rem; /* 14 - tarjetas */
  --radius-lg: 1.25rem;  /* 20 - paneles grandes */
  --radius-pill: 999px;  /* botones, etiquetas */

  /* ---- Movimiento (curvas fuertes, Emil Kowalski) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Capas (escala z semántica, nunca 9999) ---- */
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ========================= TEMA CLARO (por defecto) ===================== */
  --bg: oklch(0.992 0.002 85);
  --surface: oklch(0.974 0.004 80);
  --surface-2: oklch(0.952 0.006 78);
  --surface-inset: oklch(0.935 0.007 78);

  --ink: oklch(0.23 0.015 70);
  --ink-muted: oklch(0.455 0.018 68);  /* AA sobre --bg y --surface */
  --ink-subtle: oklch(0.55 0.02 68);   /* texto grande / meta */

  --border: oklch(0.9 0.006 78);
  --border-strong: oklch(0.82 0.008 78);

  --accent: oklch(0.8 0.152 74);        /* ámbar - relleno */
  --accent-hover: oklch(0.755 0.155 70);
  --accent-wash: oklch(0.8 0.152 74 / 0.14); /* tinte de fondo 14% */
  --on-accent: oklch(0.24 0.045 58);    /* texto sobre ámbar (AA) */
  --link: oklch(0.52 0.13 54);          /* texto interactivo sobre claro (AA) */
  --focus: oklch(0.55 0.17 54);

  --ink-on-dark: oklch(0.96 0.004 80);  /* para scrims/piezas oscuras en claro */

  /* ---- Datos (siempre acompañados de texto/íconos, nunca solo color) ---- */
  --data-you: oklch(0.72 0.15 72);      /* tu marca */
  --data-rival: oklch(0.56 0.055 235);  /* competidores (frío, no es la marca) */
  --data-track: oklch(0.9 0.006 78);    /* pista de barras */
  --data-pos: oklch(0.56 0.1 155);
  --data-neu: oklch(0.62 0.03 80);
  --data-neg: oklch(0.56 0.15 28);

  --shadow-sm: 0 1px 2px oklch(0.3 0.02 75 / 0.06),
    0 1px 1px oklch(0.3 0.02 75 / 0.04);
  --shadow-md: 0 6px 24px -10px oklch(0.3 0.03 75 / 0.14),
    0 2px 6px -4px oklch(0.3 0.03 75 / 0.1);
  --shadow-lg: 0 24px 60px -24px oklch(0.3 0.04 75 / 0.22),
    0 8px 20px -12px oklch(0.3 0.03 75 / 0.12);
  --shadow-focus: 0 0 0 3px oklch(0.55 0.17 54 / 0.35);
}

/* ============================= TEMA OSCURO ================================ */
/* Profundidad por luminosidad de superficie (no por sombra). Cuerpo un punto
   más ligero en peso. Acentos levemente más brillantes. */
:root[data-theme='dark'] {
  --weight-body: 380;

  --bg: oklch(0.175 0.006 75);
  --surface: oklch(0.213 0.008 75);
  --surface-2: oklch(0.252 0.009 75);
  --surface-inset: oklch(0.158 0.006 75);

  --ink: oklch(0.955 0.004 82);
  --ink-muted: oklch(0.745 0.012 80);
  --ink-subtle: oklch(0.63 0.013 80);

  --border: oklch(0.31 0.01 75);
  --border-strong: oklch(0.4 0.012 75);

  --accent: oklch(0.83 0.148 80);
  --accent-hover: oklch(0.875 0.14 82);
  --accent-wash: oklch(0.83 0.148 80 / 0.16);
  --on-accent: oklch(0.2 0.045 58);
  --link: oklch(0.84 0.13 80);
  --focus: oklch(0.83 0.148 80);

  --ink-on-dark: oklch(0.96 0.004 80);

  --data-you: oklch(0.83 0.148 80);
  --data-rival: oklch(0.72 0.07 235);
  --data-track: oklch(0.3 0.01 75);
  --data-pos: oklch(0.72 0.11 155);
  --data-neu: oklch(0.7 0.03 80);
  --data-neg: oklch(0.68 0.14 28);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 8px 30px -12px oklch(0 0 0 / 0.55);
  --shadow-lg: 0 28px 70px -28px oklch(0 0 0 / 0.65);
  --shadow-focus: 0 0 0 3px oklch(0.83 0.148 80 / 0.4);
}

/* Preferencia del sistema cuando el usuario no eligió tema explícito. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --weight-body: 380;

    --bg: oklch(0.175 0.006 75);
    --surface: oklch(0.213 0.008 75);
    --surface-2: oklch(0.252 0.009 75);
    --surface-inset: oklch(0.158 0.006 75);

    --ink: oklch(0.955 0.004 82);
    --ink-muted: oklch(0.745 0.012 80);
    --ink-subtle: oklch(0.63 0.013 80);

    --border: oklch(0.31 0.01 75);
    --border-strong: oklch(0.4 0.012 75);

    --accent: oklch(0.83 0.148 80);
    --accent-hover: oklch(0.875 0.14 82);
    --accent-wash: oklch(0.83 0.148 80 / 0.16);
    --on-accent: oklch(0.2 0.045 58);
    --link: oklch(0.84 0.13 80);
    --focus: oklch(0.83 0.148 80);

    --data-you: oklch(0.83 0.148 80);
    --data-rival: oklch(0.72 0.07 235);
    --data-track: oklch(0.3 0.01 75);
    --data-pos: oklch(0.72 0.11 155);
    --data-neu: oklch(0.7 0.03 80);
    --data-neg: oklch(0.68 0.14 28);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-md: 0 8px 30px -12px oklch(0 0 0 / 0.55);
    --shadow-lg: 0 28px 70px -28px oklch(0 0 0 / 0.65);
    --shadow-focus: 0 0 0 3px oklch(0.83 0.148 80 / 0.4);
  }
}