/* Hallmark · tokens · app-shell · theme: studied-DNA (source: juannico125/smart-preu-demo)
 * paper oklch(98% 0.008 85) · card blanco · accent oklch(58% 0.13 75) dorado Pensar
 * body: Plus Jakarta Sans · label/cifras: IBM Plex Mono · marca: Source Serif 4
 * pre-emit critique: P5 H5 E5 S4 R4 V4
 *
 * El ADN sale de smart-preu-demo, del propio usuario. Lo que se toma de ahí,
 * literal, es la voz de componente:
 *   · tarjeta blanca con radio 16 y sombra muy suave
 *   · botón primario con radio 12, peso 700 y resplandor del color de marca
 *   · pastillas (radio 999) para las etiquetas — sí, aquí sí van
 *   · banda sólida de color de marca en la cabecera del inicio
 *   · insignia de área: cuadrado redondeado, fondo tintado, peso 800
 *   · opciones de pregunta con borde de 2px y letra en círculo
 *   · Plus Jakarta Sans en todo el texto de trabajo
 *
 * Lo único que cambia respecto del referente es el color: Smart es verde,
 * Pensar es dorado. La banda NO va dorada: en amarillo grande el dorado se
 * vuelve mostaza y se come la pantalla. Va en el café casi negro del logotipo,
 * con el dorado reservado al avatar, a la acción principal y a las pastillas —
 * que es donde se lee como marca y no como fondo.
 *
 * El avatar sobre la banda es la única mancha dorada de la cabecera: a esa
 * escala el color funciona.
 *
 * Source Serif 4 se queda solo en el logotipo, para no rediseñar la marca.
 */
:root {
  /* ── superficie ── */
  --color-stage:   oklch(89% 0.018 82);      /* fondo detrás del marco */
  --color-paper:   oklch(98% 0.008 85);      /* superficie de la app */
  --color-card:    oklch(99.6% 0.003 85);    /* tarjeta */
  --color-paper-2: oklch(96% 0.012 85);      /* hover / campo */
  --color-paper-3: oklch(93.5% 0.016 84);    /* prensado */
  --color-paper-4: oklch(90% 0.020 84);

  /* ── banda de marca · cabecera del inicio y splash ── */
  --color-band:       oklch(27% 0.022 70);   /* café casi negro, el del logotipo */
  --color-band-2:     var(--color-accent);   /* el avatar es la única mancha dorada */
  --color-band-ink:   oklch(97% 0.008 88);
  --color-band-muted: oklch(76% 0.020 82);   /* secundario sobre la banda */
  --color-band-glass: oklch(100% 0 0 / 0.09);

  /* ── tinta ── */
  --color-ink:       oklch(24% 0.020 78);
  --color-ink-soft:  oklch(45% 0.018 78);
  --color-ink-faint: oklch(60% 0.014 80);

  /* ── bordes ── */
  --color-line:      oklch(89% 0.014 84);
  --color-line-2:    oklch(93% 0.010 84);
  --color-line-tint: oklch(83% 0.045 82);    /* borde tintado de la tarjeta activa */

  /* ── acento dorado Pensar ── */
  --color-accent:      oklch(58% 0.13 75);
  --color-accent-deep: oklch(46% 0.12 70);
  --color-accent-lite: oklch(66% 0.13 78);
  --color-accent-text: oklch(45% 0.11 70);
  --color-accent-ink:  oklch(99% 0.004 90);
  --color-accent-tint: oklch(94% 0.045 84);  /* fondo de pastilla e insignia */
  --color-accent-glow: oklch(58% 0.13 75 / 0.28);
  --color-focus:       oklch(52% 0.14 72);

  /* ── semánticos ── */
  --color-ok:       oklch(50% 0.14 152);
  --color-ok-tint:  oklch(94% 0.045 152);
  --color-err:      oklch(53% 0.18 25);
  --color-err-tint: oklch(94% 0.035 25);

  /* ── tintes por materia ── */
  --tint-lc:  oklch(50% 0.20 25);
  --tint-mat: oklch(48% 0.18 255);
  --tint-soc: oklch(55% 0.17 50);
  --tint-ing: oklch(46% 0.19 300);
  --tint-bio: oklch(50% 0.16 145);
  --tint-fis: oklch(51% 0.13 220);
  --tint-qui: oklch(50% 0.20 355);

  /* ── tipografía ── */
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Source Serif 4", Georgia, serif;   /* solo el logotipo */

  --text-xs:   0.78rem;
  --text-sm:   0.86rem;
  --text-base: 0.94rem;
  --text-md:   1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.2rem;

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-body:  1.55;

  /* ── espacio · escala 4pt ── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  22px;
  --space-xl:  30px;
  --space-2xl: 44px;

  /* ── radios · los del referente ── */
  --radius-xs:   8px;
  --radius-sm:   11px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── sombras · muy suaves, salvo el resplandor del botón primario ── */
  --shadow-card:  0 1px 3px oklch(24% 0.02 78 / 0.07);
  --shadow-lift:  0 6px 20px oklch(24% 0.02 78 / 0.09);
  --shadow-glow:  0 6px 16px var(--color-accent-glow);
  --shadow-frame: 0 0 60px oklch(24% 0.02 78 / 0.16);

  /* ── 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: 110ms;
  --dur-short: 180ms;
  --dur-long:  300ms;

  /* ── armazón ── */
  --shell:  440px;
  --nav-h:  64px;
  --cta-h:  78px;

  /* ── alias heredados ── */
  --rule:          1px solid var(--color-line);
  --rule-soft:     1px solid var(--color-line-2);
  --rule-hairline: var(--rule);
  --color-accent-soft: var(--color-accent-tint);
  --color-ok-soft:     var(--color-ok-tint);
  --color-err-soft:    var(--color-err-tint);
  --color-rule:        var(--color-line);
  --color-rule-soft:   var(--color-line-2);
  --tracking-tight: 0;
  --tracking-wide:  0.08em;
}