/* Hallmark · tokens · project: Sinsonte (landing)
 * theme: LOCKED BRAND SYSTEM — branding/colors/tokens.json is the source of truth.
 * Colour values are carried as the exact brand hex, not re-derived in OKLCH:
 * branding/colors/COLORS.md forbids any colour that is not in tokens.json, and the
 * documented WCAG ratios (grana/papel 6.24, tinta/papel 16.6, papel/tinta 15.9) are
 * measured against these exact values. Converting them would be drift, not polish.
 * Type: Jost 500 (OFL, self-hosted, subset) for display + brand; system sans for text,
 * per branding/type/TYPE.md.
 */

:root {
  color-scheme: light dark;

  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-grana: #C01441;   /* marca y grabación — un acento por pantalla */
  --color-quetzal: #2E8C74; /* hecho, procesado */
  --color-ambar: #E8A13D;   /* cita verificable — nunca lleva texto encima */

  /* ── Ground (light / Papel) ────────────────────────────────────────── */
  --color-bg: #FBF8F3;
  --color-panel: #F5F1E9;
  --color-rule: #E4DDD2;
  --color-rule-strong: #D3CABC;
  --color-ink: #191519;
  --color-muted: #8C837B;
  --color-muted-strong: #6A625B;

  /* Derived surfaces — declared and measured, never improvised with alpha.
   * COLORS.md: "Si hace falta un rosado, se define como token y se mide."
   * Ratios below are computed against the ground they are used on. */
  --color-accent-ink: #C01441;          /* Grana as text on Papel — 6.24:1 */
  --color-accent-wash: #F7E7EA;         /* Grana at document weight */
  --color-grana-pressed: #A50F37;       /* hover/active of the Grana button — Papel on it: 7.28:1 */
  --color-ambar-wash: #FBEEDA;
  --color-ambar-deep: #C98426;          /* border of a filled Ámbar chip — never a text colour */
  --color-quetzal-ink: #226B58;         /* Quetzal darkened for small text on Papel — 5.91:1 */
  --color-on-grana: #FBF8F3;
  --color-on-ambar: #191519;            /* Ámbar nunca lleva texto claro encima */
  --color-mark: #C01441;                /* the mark on a light ground */
  --color-scrim: rgb(25 21 25 / 0.55);

  /* ── Speakers ──────────────────────────────────────────────────────── */
  --color-hablante-1: #3B6FB0;
  --color-hablante-2: #7E5AA6;
  --color-hablante-3: #5E8C4A;
  --color-hablante-4: #9C6239;

  --color-focus: #C01441;

  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --track-display: 0.012em;  /* branding/type/TYPE.md — ajustado, no holgado */
  --track-caps: 0.09em;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --text-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --text-3xl: clamp(2.125rem, 3.4vw + 1.2rem, 3.5rem);
  --text-display-s: clamp(2.25rem, 3.6vw + 1.2rem, 3.75rem);
  --text-display: clamp(2.75rem, 6vw + 1rem, 5.5rem);

  /* ── Space (4 pt) ──────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: clamp(4.5rem, 9vw, 8rem);
  --space-gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;
  --page-max: 74rem;

  /* ── Line / radius ─────────────────────────────────────────────────── */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-draw: 900ms;
}

/* ── Ground (dark / Tinta) — redefined, not inverted ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #131116;
    --color-panel: #1B181D;
    --color-rule: #2C272E;
    --color-rule-strong: #3B353E;
    --color-ink: #E9E3DC;
    --color-muted: #948B92;
    --color-muted-strong: #B4ABB1;

    /* Grana no va sobre Tinta (2.95:1). En fondo oscuro la marca va en Papel y
     * el acento de texto usa este rosado medido: 7.86:1 sobre #131116. */
    --color-accent-ink: #F0899F;
    --color-accent-wash: #2E1620;
    --color-grana-pressed: #A50F37;
    --color-ambar-wash: #33270F;
    --color-quetzal-ink: #6FC0A6;       /* 8.75:1 sobre #131116 */
    --color-focus: #F0899F;
    --color-mark: #E9E3DC;              /* la marca va en Papel sobre fondo oscuro */
    --color-scrim: rgb(6 5 7 / 0.66);

    --color-hablante-1: #7FA6DC;
    --color-hablante-2: #B394D0;
    --color-hablante-3: #93C077;
    --color-hablante-4: #D19A6A;
  }
}

:root[data-theme="dark"] {
  --color-bg: #131116;
  --color-panel: #1B181D;
  --color-rule: #2C272E;
  --color-rule-strong: #3B353E;
  --color-ink: #E9E3DC;
  --color-muted: #948B92;
  --color-muted-strong: #B4ABB1;

  --color-accent-ink: #F0899F;
  --color-accent-wash: #2E1620;
  --color-grana-pressed: #A50F37;
  --color-ambar-wash: #33270F;
  --color-quetzal-ink: #6FC0A6;
  --color-focus: #F0899F;
  --color-mark: #E9E3DC;
  --color-scrim: rgb(6 5 7 / 0.66);

  --color-hablante-1: #7FA6DC;
  --color-hablante-2: #B394D0;
  --color-hablante-3: #93C077;
  --color-hablante-4: #D19A6A;
}