/* The owner page's tokens. Written by the Designer, 2026-10-21, for the first hand-off (design\archie\pages\2026-10-21-owner-page).
   A new surface: there is no repo token file to baseline from yet. These values are proposed with the mockup and
   take effect when Scott approves it. The build copies this block; values unchanged.
   Mode: html[data-mode="light"|"dark"]; with no data-mode the person's device setting decides.
   Scheme: html[data-scheme="spruce"|"harbor"|"clay"|"plum"]; spruce is the default. */

:root {
  /* type */
  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Instrument Sans Variable", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-quote: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;    /* 12px: badges, axis labels */
  --text-sm: 0.875rem;   /* 14px: metadata, labels */
  --text-md: 1rem;       /* 16px: body, buttons, inputs */
  --text-lg: 1.125rem;   /* 18px: card titles */
  --text-xl: 1.5rem;     /* 24px: page title on a phone */
  --text-2xl: 1.875rem;  /* 30px: page title on a desk */
  --text-num: 2.75rem;   /* 44px: the one big count on Today */
  --leading-tight: 1.2;
  --leading-body: 1.5;

  /* space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px;

  /* shape */
  --radius-sm: 6px;   /* inputs, small buttons */
  --radius-md: 10px;  /* buttons, chips */
  --radius-lg: 14px;  /* cards, panels */
  --radius-pill: 999px;

  /* layout */
  --rail-wide: 248px;
  --rail-narrow: 84px;
  --content-max: 1180px;
  --drawer-width: 400px;
  --tap: 44px;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Light (default) */
:root, html[data-mode="light"] {
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #EFEDE7;
  --line: #E2DFD7;
  --line-input: #8A857A;
  --ink: #1B1D1A;
  --ink-2: #4A4D47;
  --muted: #686B63;
  --ok: #286B44;      --ok-soft: #E4F2E8;
  --warn: #8A5A0B;    --warn-soft: #FBEFD6;
  --bad: #A3312B;     --bad-soft: #FBE4E1;
  --info: #2D5F8F;    --info-soft: #E3EDF7;
  --focus: #B7791F;
  --shadow-1: 0 1px 2px rgba(27, 29, 26, 0.06), 0 0 0 1px rgba(27, 29, 26, 0.03);
  --shadow-2: 0 14px 36px rgba(27, 29, 26, 0.16);
  --scrim: rgba(27, 29, 26, 0.32);
  color-scheme: light;
}

/* Dark */
html[data-mode="dark"] {
  --bg: #121412;
  --surface: #1A1D1B;
  --surface-2: #232724;
  --line: #2E332F;
  --line-input: #6B726B;
  --ink: #ECEEEA;
  --ink-2: #BFC4BD;
  --muted: #959C94;
  --ok: #6CCB8F;      --ok-soft: #17301F;
  --warn: #E8B45A;    --warn-soft: #33280F;
  --bad: #F08A80;     --bad-soft: #3A1D1A;
  --info: #8DB8E6;    --info-soft: #182A3B;
  --focus: #F2C14E;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Schemes: the accent only. Status colours never change with the scheme. */
:root, html[data-scheme="spruce"] { --accent: #2E6B53; --on-accent: #FFFFFF; --accent-soft: #E2EFE8; }
html[data-scheme="harbor"] { --accent: #2C5F8A; --on-accent: #FFFFFF; --accent-soft: #E3ECF5; }
html[data-scheme="clay"]   { --accent: #A24E2C; --on-accent: #FFFFFF; --accent-soft: #F7E6DD; }
html[data-scheme="plum"]   { --accent: #6E3F72; --on-accent: #FFFFFF; --accent-soft: #F1E6F2; }

html[data-mode="dark"], html[data-mode="dark"][data-scheme="spruce"] { --accent: #5DBB93; --on-accent: #0D1F17; --accent-soft: #183028; }
html[data-mode="dark"][data-scheme="harbor"] { --accent: #7AB0E0; --on-accent: #0B1B2A; --accent-soft: #172A3C; }
html[data-mode="dark"][data-scheme="clay"]   { --accent: #EB9670; --on-accent: #2A120A; --accent-soft: #36211A; }
html[data-mode="dark"][data-scheme="plum"]   { --accent: #C99ACD; --on-accent: #24112A; --accent-soft: #2E2232; }

/* Match my device: no data-mode set, and the device asks for dark. Same values as Dark above. */
@media (prefers-color-scheme: dark) {
  html:not([data-mode]) {
    --bg: #121412;
    --surface: #1A1D1B;
    --surface-2: #232724;
    --line: #2E332F;
    --line-input: #6B726B;
    --ink: #ECEEEA;
    --ink-2: #BFC4BD;
    --muted: #959C94;
    --ok: #6CCB8F;      --ok-soft: #17301F;
    --warn: #E8B45A;    --warn-soft: #33280F;
    --bad: #F08A80;     --bad-soft: #3A1D1A;
    --info: #8DB8E6;    --info-soft: #182A3B;
    --focus: #F2C14E;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.02);
    --shadow-2: 0 14px 36px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
  html:not([data-mode]) { --accent: #5DBB93; --on-accent: #0D1F17; --accent-soft: #183028; }
  html:not([data-mode])[data-scheme="harbor"] { --accent: #7AB0E0; --on-accent: #0B1B2A; --accent-soft: #172A3C; }
  html:not([data-mode])[data-scheme="clay"]   { --accent: #EB9670; --on-accent: #2A120A; --accent-soft: #36211A; }
  html:not([data-mode])[data-scheme="plum"]   { --accent: #C99ACD; --on-accent: #24112A; --accent-soft: #2E2232; }
}