/* Arlo, clean slate (2026-10-05). One family, two inks, two liquids.
   Colour in OKLCH only. Contrast checked in build/contrast.py (ink 17.9:1 light / 18.4:1 dark;
   white on the coral fill 4.7:1). Light is the landing's default, dark the app's; both pages
   carry both themes. */

:root {
  /* type: Mona Sans, variable width (75-125) and weight (200-900) */
  --font: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;

  /* the two liquids, and the line between them */
  --coral: oklch(0.575 0.17 41);          /* the Trader: buttons, the top liquid (white text 4.7:1) */
  --coral-bright: oklch(0.68 0.17 45);    /* the Trader's liquid surface */
  --indigo: oklch(0.385 0.135 268);       /* the Backer: the bottom liquid */
  --indigo-soft: oklch(0.62 0.10 268);    /* the Backer's bonus layer */
  --stopline: oklch(0.575 0.17 41);

  /* motion: strong curves, short durations (Emil Kowalski; impeccable) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-ui: 200ms;
  --t-state: 280ms;
  --t-enter: 640ms;

  /* space: 4px base, used in steps that differ by at least 1.5x */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 28px; --r-pill: 999px;

  /* z: one scale, named by job */
  --z-sticky: 10; --z-popover: 20; --z-overlay: 30; --z-dialog: 40; --z-toast: 50;
}

/* light: pure white, ink carries the indigo at low chroma */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --surface: oklch(0.972 0.004 268);
  --surface-2: oklch(0.945 0.006 268);
  --band: oklch(0.962 0.007 268);            /* the landing's second part colour (sheets) */
  --rule: oklch(0.905 0.008 268);
  --rule-strong: oklch(0.84 0.01 268);
  --ink: oklch(0.205 0.03 268);
  --ink-2: oklch(0.40 0.025 268);
  --muted: oklch(0.50 0.02 268);
  --trader-text: oklch(0.52 0.16 40);
  --backer-text: oklch(0.385 0.135 268);
  --arlo-fill: oklch(0.80 0.01 268);
  --gain: oklch(0.54 0.14 155);
  --gain-text: oklch(0.48 0.13 155);       /* green as text: the Open tag, 5.2:1 on its tint */
  --loss: oklch(0.56 0.19 25);
  --on-fill: oklch(1 0 0);
  --shadow-soft: 0 1px 2px oklch(0.205 0.03 268 / 0.06), 0 12px 40px -12px oklch(0.205 0.03 268 / 0.18);
  --glass: oklch(1 0 0 / 0.72);
}

/* dark: near-black at zero chroma, surfaces lean toward the indigo */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.115 0 0);
  --surface: oklch(0.155 0.004 268);
  --surface-2: oklch(0.19 0.006 268);
  --band: oklch(0.2 0.004 268);
  --rule: oklch(0.255 0.008 268);
  --rule-strong: oklch(0.33 0.01 268);
  --ink: oklch(0.965 0.004 268);
  --ink-2: oklch(0.82 0.01 268);
  --muted: oklch(0.68 0.014 268);
  --trader-text: oklch(0.74 0.15 46);
  --backer-text: oklch(0.70 0.13 268);
  --indigo: oklch(0.50 0.15 268);
  --indigo-soft: oklch(0.66 0.11 268);
  --coral-bright: oklch(0.72 0.165 46);
  --arlo-fill: oklch(0.48 0.012 268);
  --gain: oklch(0.75 0.16 155);
  --gain-text: oklch(0.75 0.16 155);
  --loss: oklch(0.68 0.19 25);
  --on-fill: oklch(1 0 0);
  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.5), 0 18px 48px -16px oklch(0 0 0 / 0.7);
  --glass: oklch(0.155 0.004 268 / 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(0.115 0 0);
    --surface: oklch(0.155 0.004 268);
    --surface-2: oklch(0.19 0.006 268);
    --band: oklch(0.2 0.004 268);
    --rule: oklch(0.255 0.008 268);
    --rule-strong: oklch(0.33 0.01 268);
    --ink: oklch(0.965 0.004 268);
    --ink-2: oklch(0.82 0.01 268);
    --muted: oklch(0.68 0.014 268);
    --trader-text: oklch(0.74 0.15 46);
    --backer-text: oklch(0.70 0.13 268);
    --indigo: oklch(0.50 0.15 268);
    --indigo-soft: oklch(0.66 0.11 268);
    --coral-bright: oklch(0.72 0.165 46);
    --arlo-fill: oklch(0.48 0.012 268);
    --gain: oklch(0.75 0.16 155);
    --gain-text: oklch(0.75 0.16 155);
    --loss: oklch(0.68 0.19 25);
    --on-fill: oklch(1 0 0);
    --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.5), 0 18px 48px -16px oklch(0 0 0 / 0.7);
    --glass: oklch(0.155 0.004 268 / 0.72);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons: one shape, pressed feels pressed */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px; border: 0;
  border-radius: var(--r-pill); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease, box-shadow var(--t-ui) ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--coral); color: var(--on-fill); }
.btn-indigo { background: var(--indigo); color: var(--on-fill); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn .ico { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%;
  background: oklch(1 0 0 / 0.16); transition: transform var(--t-ui) var(--ease-out); }
.btn-quiet .ico { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: oklch(0.54 0.17 40); }
  .btn-indigo:hover { background: oklch(from var(--indigo) calc(l - 0.04) c h); }
  .btn-ink:hover { background: var(--ink-2); }
  .btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
  .btn:hover .ico { transform: translate(2px, -1px) scale(1.05); }
}
.btn svg { width: 14px; height: 14px; }

/* a number that changes in place: each changed glyph slides through a soft blur */
.morph { display: inline-flex; white-space: pre; }
.morph > span { display: inline-block; position: relative; }
.morph > span > span { display: inline-block; }
.morph .g-out { position: absolute; left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}