/*
 * ai poveste — design tokens
 * ---------------------------------------------------------------------------
 * The single source of truth for colour, type, space, shape and motion.
 * Plain CSS custom properties, so the brand book (brand/brand-book.html) and
 * Tailwind (assets/css/theme.css) read the same values.
 *
 * Names deliberately avoid Tailwind v4 theme namespaces (--color-*, --font-*,
 * --radius-*, --leading-*, --tracking-*, --ease-*), so theme.css can map
 * `--color-surface: var(--surface)` without self-reference.
 *
 * Two themes, from the lamp's two materials:
 *   Zi    (day)     — walnut ink on white; brass only as line, dot or large accent.
 *   Seară (evening) — dark walnut room; brass is the light.
 * Contrast is enforced by scripts/brand/check_contrast.py — run it after any change.
 */

:root {
  /* --- Primitives: walnut (heartwood) ----------------------------------- */
  --walnut-50: #F7F3EF;   /* small fills only, never a page background */
  --walnut-100: #ECE3DA;
  --walnut-200: #D8C6B6;
  --walnut-250: #C7AF9B;  /* Seară body text: 8.9:1 on walnut-950 (band 7–10) */
  --walnut-300: #BA9F89;
  --walnut-350: #A88B75;  /* Seară muted text: 5.9:1 on walnut-950 */
  --walnut-400: #977761;
  --walnut-500: #775944;
  --walnut-600: #5E4433;
  --walnut-700: #4A3427;  /* brand primary */
  --walnut-800: #36271D;
  --walnut-900: #251B14;
  --walnut-950: #17110C;  /* the Seară room */

  /* --- Primitives: brass ------------------------------------------------- */
  --brass-100: #F4E9C9;
  --brass-200: #E8D59C;
  --brass-300: #D9BD6E;   /* the Seară light */
  --brass-400: #C9A550;
  --brass-500: #B08B3A;   /* brand secondary — never as small text on white (3.2:1) */
  --brass-600: #8F6F2C;   /* minimum for brass text on white (4.7:1) */
  --brass-700: #6E5522;
  --brass-800: #4E3C18;

  /* --- Primitives: neutrals and calm status colours ---------------------- */
  --white: #FFFFFF;
  --paper-tint: #F9F9F8;  /* neutral (not cream) tint for alternating Zi sections */
  --moss-700: #4F6A3A;
  --moss-300: #9DB487;
  --ochre-700: #8C520D;   /* warning — deliberately not brass */
  --ochre-300: #DDA35A;
  --brick-700: #A33D2D;   /* danger — muted, never alarming */
  --brick-300: #E38B78;

  /* --- Type --------------------------------------------------------------- */
  --family-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --family-story: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; /* italic only */
  --family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;          /* system only: the Markdown source in the Jurnal editor */

  --size-xs: 0.8125rem;                      /* 13px — captions, never body */
  --size-sm: 0.9375rem;                      /* 15px */
  --size-base: 1.0625rem;                    /* 17px — body */
  --size-lg: 1.25rem;                        /* 20px */
  --size-xl: 1.5rem;                         /* 24px — the smallest size brass-500 text may use */
  --size-2xl: 2rem;                          /* 32px */
  --size-3xl: clamp(2.25rem, 5vw, 3rem);
  --size-display: clamp(3rem, 9vw, 7.5rem);

  --lh-display: 1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --weight-heading: 300;
  --weight-body: 400;
  --weight-label: 500;

  --letter-display: -0.01em;
  --letter-body: 0.01em;
  --letter-eyebrow: 0.14em;

  /* --- Space and shape ----------------------------------------------------- */
  --space-gutter: clamp(1rem, 5vw, 3rem);
  --space-section: clamp(4rem, 10vw, 10rem);
  --measure: 60ch;

  --round-frame: 0;        /* photos, panels, tiles: frames are square */
  --round-field: 0;        /* text fields are frames too */
  --round-control: 9999px; /* buttons, Play, chips: objects are round */

  /* --- Motion: calm, opacity/transform only ------------------------------- */
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-quick: 180ms;
  --motion-calm: 500ms;
  --motion-slow: 700ms;
  --motion-breath: 5.5s;   /* the idle Play glow */
}

/* --- Theme: Zi (day) — the default ---------------------------------------- */
:root,
[data-theme="zi"] {
  color-scheme: light;
  --surface: var(--white);
  --surface-alt: var(--paper-tint);
  --surface-raised: var(--white);
  --text: var(--walnut-900);
  --text-muted: var(--walnut-600);
  --accent: var(--walnut-700);
  --accent-hover: var(--walnut-800);
  --on-accent: var(--white);
  --accent-text: var(--walnut-700);
  --brass: var(--brass-500);
  --brass-text: var(--brass-700);
  --line: var(--walnut-100);
  --field-border: var(--walnut-400);
  --field-fill: var(--white);
  --focus: var(--brass-600);
  --success: var(--moss-700);
  --warning: var(--ochre-700);
  --danger: var(--brick-700);
  --weight-display: 200;
  --glow-color: rgb(176 139 58 / 0.22);
}

/* --- Theme: Seară (evening) — the listening page, always ------------------ */
[data-theme="seara"] {
  color-scheme: dark;
  --surface: var(--walnut-950);
  --surface-alt: var(--walnut-900);
  --surface-raised: var(--walnut-900);
  --text: var(--walnut-250);
  --text-muted: var(--walnut-350);
  --accent: var(--brass-300);
  --accent-hover: var(--brass-200);
  --on-accent: var(--walnut-950);
  --accent-text: var(--brass-300);
  --brass: var(--brass-300);
  --brass-text: var(--brass-300);
  --line: var(--walnut-800);
  --field-border: var(--walnut-400);
  --field-fill: var(--walnut-900);
  --focus: var(--brass-300);
  --success: var(--moss-300);
  --warning: var(--ochre-300);
  --danger: var(--brick-300);
  --weight-display: 300;   /* thin light-on-dark text blooms (halation) */
  --glow-color: rgb(217 189 110 / 0.45);
}

/* --- Theme: auto — account pages follow the system ------------------------ */
/* Must stay identical to [data-theme="seara"]; check_contrast.py enforces it. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --surface: var(--walnut-950);
    --surface-alt: var(--walnut-900);
    --surface-raised: var(--walnut-900);
    --text: var(--walnut-250);
    --text-muted: var(--walnut-350);
    --accent: var(--brass-300);
    --accent-hover: var(--brass-200);
    --on-accent: var(--walnut-950);
    --accent-text: var(--brass-300);
    --brass: var(--brass-300);
    --brass-text: var(--brass-300);
    --line: var(--walnut-800);
    --field-border: var(--walnut-400);
    --field-fill: var(--walnut-900);
    --focus: var(--brass-300);
    --success: var(--moss-300);
    --warning: var(--ochre-300);
    --danger: var(--brick-300);
    --weight-display: 300;
    --glow-color: rgb(217 189 110 / 0.45);
  }
}