/* Hallmark · macrostructure: Bento Grid · F1 Bento knobs: tiles=11, spans=mosaic-irregular, border=hairline
 * theme: custom · vibe: "nocturno Gemini, premium, creíble" · paper: oklch(15% 0.018 285) · accent: oklch(76% 0.15 275)
 * display: Geist 600/700 · body: Geist 400 · outlier: Geist Mono · axes: dark / geometric-sans / cool
 * nav: N5 floating pill · footer: Ft5 statement · motion: 3 primitivas (number-reveal · stagger · cta-lift)
 * v1.2.0 · dual theme: noche (default) + día (auto por sistema, override manual con [data-theme])
 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Color · anclado a la identidad Gemini (violeta-azul) ── */
  --color-paper:     oklch(15% 0.018 285);   /* canvas nocturno con tinte violeta */
  --color-paper-2:   oklch(19% 0.020 285);   /* elevación 1 · tarjetas bento */
  --color-paper-3:   oklch(24% 0.022 285);   /* elevación 2 · superficies activas */
  --color-ink:       oklch(93% 0.010 285);   /* texto principal */
  --color-ink-2:     oklch(74% 0.012 285);   /* texto secundario */
  --color-muted:     oklch(60% 0.014 285);   /* texto desvanecido */
  --color-rule:      oklch(30% 0.016 285);   /* hairlines */
  --color-accent:    oklch(76% 0.15 275);    /* azul-violeta Gemini · CTAs, foco, tags */
  --color-accent-ink:oklch(16% 0.030 275);   /* texto sobre relleno acento */
  --color-focus:     oklch(80% 0.19 275);    /* anillo de foco, mayor croma */
  --color-bloom-a:   oklch(60% 0.140 275 / 0.16); /* bloom violeta · canvas */
  --color-bloom-b:   oklch(65% 0.120 340 / 0.10); /* bloom rosa secundario · canvas */
  --shadow-nav:      0 8px 24px -12px oklch(5% 0.01 285 / 0.5);

  /* ── Tipografía ── */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, monospace;

  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.5625rem;
  --text-xl:      2rem;
  --text-2xl:     2.5rem;
  --text-display: clamp(2.25rem, 4.5vw + 1rem, 4.5rem);
  --text-figure:  clamp(4.5rem, 12vw, 9rem);

  /* ── Espaciado · base 4pt ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ── Movimiento ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Reglas y radios ── */
  --rule-hair: 1px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* ── Z-index con nombre ── */
  --z-base: 1;
  --z-sticky: 200;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ── Modo día ── */
:root[data-theme="light"] {
  color-scheme: light;

  --color-paper:     oklch(97% 0.008 285);
  --color-paper-2:   oklch(99.4% 0.004 285);  /* tarjetas casi blancas sobre papel tinte */
  --color-paper-3:   oklch(93.5% 0.012 285);
  --color-ink:       oklch(23% 0.028 285);
  --color-ink-2:     oklch(40% 0.022 285);
  --color-muted:     oklch(48% 0.020 285);
  --color-rule:      oklch(87% 0.012 285);
  --color-accent:    oklch(44% 0.155 262);    /* azul Google profundo, AA sobre claro */
  --color-accent-ink:oklch(98.5% 0.004 285);
  --color-focus:     oklch(50% 0.19 262);
  --color-bloom-a:   oklch(70% 0.110 275 / 0.10);
  --color-bloom-b:   oklch(75% 0.100 340 / 0.07);
  --shadow-nav:      0 8px 24px -12px oklch(30% 0.02 285 / 0.25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: light;

    --color-paper:     oklch(97% 0.008 285);
    --color-paper-2:   oklch(99.4% 0.004 285);
    --color-paper-3:   oklch(93.5% 0.012 285);
    --color-ink:       oklch(23% 0.028 285);
    --color-ink-2:     oklch(40% 0.022 285);
    --color-muted:     oklch(48% 0.020 285);
    --color-rule:      oklch(87% 0.012 285);
    --color-accent:    oklch(44% 0.155 262);
    --color-accent-ink:oklch(98.5% 0.004 285);
    --color-focus:     oklch(50% 0.19 262);
    --color-bloom-a:   oklch(70% 0.110 275 / 0.10);
    --color-bloom-b:   oklch(75% 0.100 340 / 0.07);
    --shadow-nav:      0 8px 24px -12px oklch(30% 0.02 285 / 0.25);
  }
}

/* ── Colores oficiales de marca Google (logos y acentos puntuales) ── */
:root {
  --color-g-blue:    #4285F4;
  --color-g-red:     #EA4335;
  --color-g-yellow:  #FBBC04;
  --color-g-green:   #34A853;
  --color-g-gemini:  #4E86FF;
  --gradient-gemini: linear-gradient(135deg, #4E86FF 0%, #A662F5 55%, #F5AB58 100%);
}