/* Design tokens for the Origin One front door. Dark is the only look.
   Base unit 8 px. Type steps follow a 1.25 ratio from 16 px, plus small label sizes. */
:root {
  color-scheme: dark;

  /* Colour */
  --bg: #07070A;
  --shade-rgb: 7, 7, 10;
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .075);
  --panel-edge: rgba(255, 255, 255, .09);
  --panel-top: rgba(255, 255, 255, .07);
  --panel-sheen: rgba(255, 255, 255, .07);
  --glass: rgba(13, 13, 15, .74);
  --glass-flag: rgba(10, 10, 14, .82);
  --ink: #F4F1EA;
  --ink-2: rgba(244, 241, 234, .78);
  --ink-3: rgba(244, 241, 234, .72);
  --ink-stroke: rgba(244, 241, 234, .45);
  --ink-dots: rgba(244, 241, 234, .4);
  --ink-faint: rgba(244, 241, 234, .18);
  --line: rgba(255, 255, 255, .07);
  --field: rgba(255, 255, 255, .04);
  --field-edge: rgba(255, 255, 255, .16);
  --placeholder: rgba(244, 241, 234, .5);
  --accent-ink: #FF8C80;
  --green: #3FE08F;
  --green-hover: #5AE9A1;
  --green-bg: rgba(63, 224, 143, .13);
  --green-wash: rgba(63, 224, 143, .07);
  --cta-glow: rgba(63, 224, 143, .6);
  --on-green: #07070A;
  --gold: #E6E3DC;
  --gold-ink: #F1EEE8;
  --gold-bg: rgba(255, 255, 255, .07);
  --pill: rgba(255, 255, 255, .07);
  --pill-ink: rgba(244, 241, 234, .9);
  --selected: #F4F1EA;
  --fallback-warm: rgba(233, 180, 76, .3);
  --fallback-cool: rgba(61, 91, 255, .25);
  --lift: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 44px -12px rgba(0, 0, 0, .55), 0 60px 120px -30px rgba(0, 0, 0, .75);

  /* Type */
  --display: "Anton", "Arial Narrow", sans-serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-tag: 10px;
  --t-label: 11px;
  --t-xs: 12px;
  --t-s: 12.8px;
  --t-ui: 14px;
  --t-body: 15px;
  --t-b: 16px;
  --t-m: 20px;
  --t-l: 25px;
  --t-h: 31.25px;
  --t-count: 96px;
  --t-sub: clamp(26px, 2.6vw, 42px);
  --t-hero: clamp(48px, 5.6vw, 92px);

  /* Space and shape */
  --u: 8px;
  --hair: 1px;
  --g: 24px;
  --pad: 24px;
  --shell: 1440px;
  --gutter: 28px;
  --bar-h: 64px;
  --logo-h: 40px;
  --hero-top: 96px;
  --hero-gap: 128px;
  --copy-w: 760px;
  --flag-w: 272px;
  --card-w: 630px;
  --avatar: 40px;
  --spark-h: 48px;
  --radius: 16px;
  --radius-s: 8px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 700px) {
  :root {
    --pad: 16px;
    --g: 16px;
    --gutter: 12px;
    --logo-h: 32px;
    --hero-gap: 64px;
  }
}