/* AMAI Marine · Kamen tokens (light / dark), type scale, spacing, motion.
   Light is the default; prefers-color-scheme: dark applies unless [data-theme="light"];
   [data-theme="dark"] always wins. Brass is for money only. Sand is only the selected
   ledger row and the "Standard" tag. The seam colour is for hairlines and decoration. */

:root {
  color-scheme: light;
  --page: #FFFFFF;
  --surface: #F3F5F7;
  --hairline: #D9DEE4;
  --ink: #0F1E33;
  --ink-2: #3A4552;
  --muted: #5B6775;
  --action: #0F1E33;
  --on-action: #FFFFFF;
  --brass: #8A5A1F;
  --seam: #B9A27A;
  --sand: #E6DCC6;
  --on-image: #FFFFFF;
  --scrim: 11 22 39;

  /* type */
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --fs-display: clamp(72px, 11vw, 168px);
  --fs-h1: clamp(56px, 8vw, 96px);
  --fs-h2: clamp(38px, 4.6vw, 66px);
  --fs-h3: clamp(26px, 2.8vw, 40px);
  --fs-fig: clamp(22px, 2vw, 28px);
  --fs-lede: clamp(19px, 1.7vw, 24px);
  --fs-body: 17px;
  --fs-ui: 15px;
  --fs-meta: 13px;
  --fs-scale: 11px;
  --lh-body: 1.55;
  --track-display: -0.03em;

  /* space (8-based) and layout */
  --gutter: clamp(20px, 5vw, 80px);
  --max: 1320px;
  --gap-s: 96px;
  --gap-l: 160px;
  --lap: 40px;
  --header-h: 72px;

  /* motion */
  --ease-seam: cubic-bezier(.65, 0, .35, 1);
  --ease-settle: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --t-touch: 300ms;
  --t-swap: 600ms;
  --t-draw: 700ms;
  --t-lap: 120ms;
  --t-camera: 900ms;
  --t-slow: 1200ms;
  --stagger: 90ms;

  --radius-control: 2px;
}

@media (max-width: 720px) {
  :root { --gap-s: 64px; --gap-l: 104px; --header-h: 60px; --fs-body: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0B1627;
    --surface: #122037;
    --hairline: #253650;
    --ink: #EDF1F5;
    --ink-2: #C9D2DD;
    --muted: #9AA7B5;
    --action: #EDF1F5;
    --on-action: #0B1627;
    --brass: #D6A86A;
    --seam: #6E6350;
    --sand: #2B2A22;
  }
}
:root[data-theme="dark"],
.band-dark {
  color-scheme: dark;
  --page: #0B1627;
  --surface: #122037;
  --hairline: #253650;
  --ink: #EDF1F5;
  --ink-2: #C9D2DD;
  --muted: #9AA7B5;
  --action: #EDF1F5;
  --on-action: #0B1627;
  --brass: #D6A86A;
  --seam: #6E6350;
  --sand: #2B2A22;
}