/* Phesti, Midnight & Brass. Design tokens (revision 2, 2026-10-05).
   Light theme in :root. Dark theme twice: following the device, and forced with data-theme="dark".
   Contrast notes are in README.md.
   What brass means: the record that matters (the selected event, your own crew call). It is never the
   primary button and never a section rule. One brass moment per view; the logo's small entry is the exception.
   Brass as text: #B08A3E only at 24px+ (or 18.66px+ bold) on midnight. Smaller brass text on dark uses
   --brass-300; on light it uses --brass-700. Never brass text on --c-surface-2 in dark (4.44:1). */

:root {
  color-scheme: light;

  /* Type: two families, plus the system mono stack (nothing to download) */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Primitives: the brass ramp and the midnight family (components use the roles below, not these) */
  --brass-300: #D7B674;  /* brass light: text and links on midnight (8.24:1 on #14213D) */
  --brass-400: #C7A057;  /* hover only */
  --brass-500: #B08A3E;  /* signature brass: marks on midnight; text only at 24px+ */
  --brass-600: #A0792B;  /* marks and rules on light (3.72:1 on porcelain) */
  --brass-700: #8F681A;  /* brass ink: text on light (4.70:1 on porcelain) */
  --midnight-950: #0A142A;
  --midnight-900: #14213D;
  --midnight-800: #1C2A48;
  --ivory: #EFECE7;
  --porcelain: #F5F7FA;
  --logo-brass-light: var(--brass-600); /* the logo's entry on light grounds */
  --logo-brass-dark: var(--brass-500);  /* the logo's entry on midnight */

  /* Colour roles: light */
  --c-bg: var(--porcelain); /* #F5F7FA, cool off-white page */
  --c-surface: #FFFFFF;     /* cards, fields */
  --c-surface-2: #E9EDF2;   /* panels, table heads, quiet fills */
  --c-text: #14213D;        /* midnight ink: 14.88:1 on bg */
  --c-text-2: #4E5B75;      /* secondary text: 6.36:1 on bg, 5.80:1 on surface-2 */
  --c-line: #D5D9E1;        /* hairlines, decoration only */
  --c-line-strong: #778193; /* field borders, control edges: 3.66:1 on bg */
  --c-accent: var(--brass-700); /* brass ink: 4.70:1 on bg, 5.04:1 on white; 4.29:1 on surface-2, so no small text there */
  --c-record: var(--brass-600); /* brass marks for the record that matters: 3.72:1 on bg, 3.99:1 on white */
  --c-btn: #14213D;         /* primary button fill */
  --c-btn-text: #FFFFFF;    /* 15.97:1 on btn */
  --c-btn-hover: #24365E;   /* white text 11.90:1 */
  --c-ok: #077649;          /* Available */
  --c-warn: #A65003;        /* Maybe: burnt orange, kept 30 degrees away from brass */
  --c-bad: #AE2D2F;         /* Can't */
  --c-on-status: #FFFFFF;   /* 5.68 / 5.57 / 6.53:1 on ok / warn / bad */
  --c-focus: var(--brass-700); /* focus ring: 4.70:1 on bg */

  /* Shape and depth (the mark's corners are 1/12 of an entry's height: crisp, like the serif) */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px oklch(25% 0.05 264 / 0.08), 0 10px 28px -12px oklch(25% 0.05 264 / 0.28);

  /* Space: 4-pt steps (the mark is drawn on a 4-unit module) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* Type scale: fixed small steps, fluid display steps (max <= 2.5 x min, always with a rem term) */
  --text-sm: 0.875rem;                                    /* 14 */
  --text-base: 1.0625rem;                                 /* 17 */
  --text-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); /* 19 -> 22 */
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);   /* 22 -> 30 */
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 3rem);        /* 30 -> 48 */
  --text-3xl: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);    /* 40 -> 84 */
  --weight-display: 420;    /* Newsreader at 40px and above */
  --weight-heading: 500;    /* Newsreader headings below 40px */
  --tracking-display: -0.012em;    /* headings: Newsreader's optical sizes are already tight */
  --tracking-display-lg: -0.016em; /* display sizes, 40px and above */

  /* Layout */
  --measure: min(60ch, 34em);
  --page: 75rem; /* 1200px content width */

  /* Motion: crisp */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: var(--midnight-950);      /* deep midnight page */
    --c-surface: var(--midnight-900); /* midnight: cards and the hero */
    --c-surface-2: var(--midnight-800); /* raised panels */
    --c-text: #EFECE7;        /* ivory: 15.55:1 on bg, 12.09:1 on surface-2 */
    --c-text-2: #B3BBC9;      /* 9.48:1 on bg, 7.37:1 on surface-2 */
    --c-line: #2C3850;
    --c-line-strong: #738199; /* 4.65:1 on bg, 4.05:1 on surface */
    --c-accent: var(--brass-300); /* brass light: 9.45:1 on bg */
    --c-record: var(--brass-500); /* 5.71:1 on bg, 4.98:1 on surface */
    --c-btn: #EFECE7;         /* ivory: the primary button is not brass */
    --c-btn-text: #0A142A;    /* 15.55:1 on ivory */
    --c-btn-hover: #FFFFFF;   /* 18.32:1 with --c-btn-text */
    --c-ok: #65D097;
    --c-warn: #F5A66D;
    --c-bad: #F58B84;
    --c-on-status: #0A142A;   /* 9.61 / 9.21 / 7.77:1 */
    --c-focus: var(--brass-300);
    --shadow: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 12px 32px -12px oklch(10% 0.04 264 / 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: var(--midnight-950);
  --c-surface: var(--midnight-900);
  --c-surface-2: var(--midnight-800);
  --c-text: #EFECE7;
  --c-text-2: #B3BBC9;
  --c-line: #2C3850;
  --c-line-strong: #738199;
  --c-accent: var(--brass-300);
  --c-record: var(--brass-500);
  --c-btn: #EFECE7;
  --c-btn-text: #0A142A;
  --c-btn-hover: #FFFFFF;
  --c-ok: #65D097;
  --c-warn: #F5A66D;
  --c-bad: #F58B84;
  --c-on-status: #0A142A;
  --c-focus: var(--brass-300);
  --shadow: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 12px 32px -12px oklch(10% 0.04 264 / 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
}