/*
 * Librarium Militaris: design tokens.
 *
 * Every colour, size and duration in the stylesheets comes from here. A literal
 * value in a component file is a bug; the exception the conventions allow is a
 * component's own variables, declared at the top of its block, which are that
 * component's public API.
 *
 * The archive has one palette and no light mode: the grim dark is the design,
 * not a theme. So the colours are stated once, in the notation they were drawn
 * in, rather than split into OKLCH components for a lightness flip that will
 * never happen.
 */

:root {
  /* ------------------------------------------------------------ surfaces -- */

  --color-canvas: #0a0a0c;                 /* the page itself */
  --color-canvas-veil: rgba(10, 10, 12, 0.95);  /* the control bar over it */
  --color-surface: #151518;                /* a plate: masthead, card, footer */
  --color-surface-veil: rgba(21, 21, 24, 0.95); /* the filter drawer */
  --color-surface-sunken: #18181b;         /* a chip on a plate */
  --color-field: rgba(0, 0, 0, 0.6);       /* something to type into */
  --color-inset: rgba(0, 0, 0, 0.5);       /* something cut into a plate */
  --color-inset-soft: rgba(0, 0, 0, 0.4);
  --color-backdrop: rgba(0, 0, 0, 0.8);    /* behind the sign-up dialog */
  --color-veil-strong: rgba(0, 0, 0, 0.9);
  --color-veil-soft: rgba(0, 0, 0, 0.3);
  --color-mask: rgba(10, 10, 12, 0.85);    /* over a result the reader has not asked for */
  --color-mask-lifting: rgba(10, 10, 12, 0.75);
  --color-void: #000;                      /* under a thumbnail, and on accent */

  /* ----------------------------------------------------------------- ink -- */

  --color-ink: #d4cbb8;                    /* body text: parchment, not white */
  --color-ink-bright: #fff;                /* headings and the live value */
  --color-ink-strong: #e4e4e7;
  --color-ink-muted: #d4d4d8;              /* controls */
  --color-ink-soft: #a1a1aa;
  --color-ink-dim: #71717a;
  --color-ink-faint: #52525b;              /* the quietest thing still readable */

  /* -------------------------------------------------------------- edges -- */

  --color-border: #27272a;
  --color-border-soft: rgba(39, 39, 42, 0.5);
  --color-border-faint: rgba(39, 39, 42, 0.3);
  --color-border-strong: #3f3f46;
  --color-border-hover: #71717a;

  /* ------------------------------------------------------------- accent -- */

  --color-accent: #e5a93d;
  --color-accent-hover: #facc15;
  --color-accent-wash: rgba(229, 169, 61, 0.2);  /* a chip that is switched on */
  --color-accent-line: rgba(229, 169, 61, 0.3);
  --color-accent-edge: rgba(229, 169, 61, 0.5);
  --color-accent-solid: rgba(229, 169, 61, 0.9);
  --color-on-accent: var(--color-void);

  --color-danger: #991b1b;
  --color-danger-wash: rgba(153, 27, 27, 0.15);
  --color-danger-ink: #fca5a5;
  --color-danger-hatch: rgba(153, 27, 27, 0.05);
  --color-success: #4ade80;

  /* ------------------------------------------------------------- shadow -- */

  --shadow-plate: inset 0 0 20px rgba(0, 0, 0, 0.8);      /* the recessed metal */
  --shadow-field: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-controlbar: 0 10px 30px rgba(0, 0, 0, 0.8);
  --shadow-card-hover: 0 0 15px rgba(229, 169, 61, 0.1);
  --shadow-signup: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(229, 169, 61, 0.15);
  --shadow-signup-hover: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(229, 169, 61, 0.35);
  --shadow-title: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  --shadow-bar: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-badge: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-scoreline: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  --shadow-stamp: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5));

  /* Text set over a photograph or a livery, where the page cannot promise what
     is behind it. */
  --text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.8);
  --text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.8);

  /* --------------------------------------------------------------- type -- */

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-imperial: "Cinzel", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The ramp the design actually draws on, named for the pixels it renders at.
     Fourteen steps is more than a scale wants to be; it is what is on the page,
     and naming each step is what keeps a fifteenth from being invented. */
  --text-10: 0.625rem;
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;                     /* the workhorse: controls and meta */
  --text-15: 0.9375rem;
  --text-16: 1rem;                         /* body */
  --text-17: 1.0625rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-22: 1.375rem;
  --text-24: 1.5rem;
  --text-30: 1.875rem;
  --text-32: 2rem;
  --text-36: 2.25rem;
  --text-44: 2.75rem;
  --text-60: 3.75rem;

  /* Line height. The fixed ones are paired with a step of the ramp above and
     are set in rem for it; the ratios are for text that wraps. */
  --leading-16: 1rem;
  --leading-20: 1.25rem;
  --leading-24: 1.5rem;
  --leading-26: 1.625rem;
  --leading-28: 1.75rem;
  --leading-30: 1.875rem;
  --leading-32: 2rem;
  --leading-36: 2.25rem;
  --leading-40: 2.5rem;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-prose: 1.625;
  --leading-digest: 1.65;
  --leading-loose: 1.7;
  --leading-airy: 1.75;

  /* Letter spacing. Everything set in Oswald is tracked out; how far is what
     separates a heading from a wordmark. */
  --tracking-3xs: 0.01em;
  --tracking-2xs: 0.025em;
  --tracking-xs: 0.04em;
  --tracking-sm: 0.05em;
  --tracking-md: 0.06em;
  --tracking-lg: 0.08em;
  --tracking-xl: 0.1em;
  --tracking-2xl: 0.12em;
  --tracking-3xl: 0.15em;
  --tracking-4xl: 0.2em;

  /* -------------------------------------------------------------- space -- */

  /* A 4px grid with the half-steps the design uses, named for the pixels. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-5: 0.3125rem;
  --space-6: 0.375rem;
  --space-7: 0.4375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;

  /* The page's own measurements. The gutter widens once, on the one breakpoint
     the whole site shares. */
  --shell: 1600px;
  --gutter: var(--space-16);

  --radius: 0.125rem;                      /* the house radius: a hairline bevel */
  --radius-md: 0.25rem;
  --radius-pill: 9999px;

  /* The ring a keyboard leaves on whatever it lands on. Stated once: it is the
     same ring on a chip, a tag, a card title and a button. */
  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-offset: 2px;

  /* -------------------------------------------------- depth and motion -- */

  --z-raised: 10;                          /* a page region, over the backdrop */
  --z-bar: 40;                             /* the sticky bar at the top of a page */
  --z-grain: 50;

  /* Named on its own because one transition waits this long before it starts. */
  --duration-medium: 0.3s;
  --transition-fast: 0.15s ease;
  --transition-chip: 0.2s ease;
  --transition-medium: var(--duration-medium) ease;
  --transition-reveal: 0.4s ease;
  --transition-slow: 0.5s ease;
  --transition-check: 0.12s ease-in-out;
  --transition-rise: 0.18s ease-out;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-24); }
}