/*
  Wholeday design tokens for the website, light and dark.

  Part 1 is the brand session's tokens (Docs/marketing/brand/tokens.css,
  commit 9d88870, a copy of its tokens.json is in assets/brand/), unchanged
  except for the font files. Part 2 maps them to the names site.css uses.
  When the brand tokens change, update Part 1 only.

  Fonts are the brand's Latin WOFF2 subsets (Literata 500-600, 55 KB;
  Public Sans 400-700, 20 KB), self-hosted in assets/fonts/.
*/

@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/Literata-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/PublicSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Part 1: brand tokens (--wd-*) */
:root {
  --wd-bg: #f6f8f3;
  --wd-surface: #ffffff;
  --wd-surface-sunken: #eef3ea;
  --wd-fg: #1d2a22;
  --wd-muted: #56655b;
  --wd-line: #d9e3d6;
  --wd-primary: #2f7a55;
  --wd-primary-strong: #245f42;
  --wd-on-primary: #ffffff;
  --wd-primary-soft: #e8f3eb;
  --wd-sun: #ffd666;
  --wd-accent: #b97d0a;
  --wd-accent-text: #8a5a00;
  --wd-accent-soft: #fff4d6;
  --wd-estimate: #6f8f7c;
  --wd-estimate-band: #dfe9e1;
  --wd-font-display: Literata, 'Iowan Old Style', Georgia, serif;
  --wd-font-text: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wd-space-1: 4px;
  --wd-space-2: 8px;
  --wd-space-3: 12px;
  --wd-space-4: 16px;
  --wd-space-5: 24px;
  --wd-space-6: 32px;
  --wd-space-7: 48px;
  --wd-space-8: 64px;
  --wd-space-9: 96px;
  --wd-radius-sm: 8px;
  --wd-radius-md: 12px;
  --wd-radius-lg: 20px;
  --wd-radius-xl: 28px;
  --wd-radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wd-bg: #121a15;
    --wd-surface: #18221c;
    --wd-surface-sunken: #0e1511;
    --wd-fg: #e4ece5;
    --wd-muted: #a2b2a6;
    --wd-line: #2b3a30;
    --wd-primary: #7fc9a0;
    --wd-primary-strong: #9fd8b8;
    --wd-on-primary: #0f1a13;
    --wd-primary-soft: #1f3327;
    --wd-sun: #ffd666;
    --wd-accent: #ffd666;
    --wd-accent-text: #ffd666;
    --wd-accent-soft: #3a3018;
    --wd-estimate: #8fae9b;
    --wd-estimate-band: #22332a;
  }
}
:root[data-theme="dark"] {
  --wd-bg: #121a15;
  --wd-surface: #18221c;
  --wd-surface-sunken: #0e1511;
  --wd-fg: #e4ece5;
  --wd-muted: #a2b2a6;
  --wd-line: #2b3a30;
  --wd-primary: #7fc9a0;
  --wd-primary-strong: #9fd8b8;
  --wd-on-primary: #0f1a13;
  --wd-primary-soft: #1f3327;
  --wd-sun: #ffd666;
  --wd-accent: #ffd666;
  --wd-accent-text: #ffd666;
  --wd-accent-soft: #3a3018;
  --wd-estimate: #8fae9b;
  --wd-estimate-band: #22332a;
}

/* Part 2: site names */
:root {
  color-scheme: light;

  /* Color */
  --bg: var(--wd-bg);
  --surface: var(--wd-surface);
  --surface-2: var(--wd-surface-sunken);
  --fg: var(--wd-fg);
  --muted: var(--wd-muted);
  --line: var(--wd-line);
  --line-strong: #b9c8b5;
  --primary: var(--wd-primary);
  --primary-strong: var(--wd-primary-strong);
  --primary-soft: var(--wd-primary-soft);
  --on-primary: var(--wd-on-primary);
  --sun: var(--wd-sun);
  --accent: var(--wd-accent);            /* graphics only */
  --accent-text: var(--wd-accent-text);  /* words in the accent color */
  --accent-soft: var(--wd-accent-soft);
  --estimate: var(--wd-estimate);
  --estimate-band: var(--wd-estimate-band);
  --focus: var(--wd-primary);
  --device: var(--wd-fg);                /* frame of the abstract phone shapes */

  /* Data colors: the app's WD.Tint (Views/DesignTokens.swift), for the
     illustrations only. Controls stay brand green. */
  --meal: #e06138;      /* coral */
  --meds: #8f61db;      /* purple */
  --water: #00a3c7;     /* cyan */
  --weigh: #2973e6;     /* blue */
  --fast: #4c54bd;      /* indigo */
  --move: #1a9e70;      /* green */
  --protein: #d94c80;   /* pink */
  --dose: var(--meds);
  --meal-soft: color-mix(in srgb, var(--meal) 13%, var(--surface));
  --meds-soft: color-mix(in srgb, var(--meds) 12%, var(--surface));
  --water-soft: color-mix(in srgb, var(--water) 13%, var(--surface));
  --weigh-soft: color-mix(in srgb, var(--weigh) 12%, var(--surface));
  --fast-soft: color-mix(in srgb, var(--fast) 13%, var(--surface));
  --move-soft: color-mix(in srgb, var(--move) 13%, var(--surface));

  /* Type: brand sizes (display 56, h1 40, h2 30, h3 22, body-lg 18,
     body 16, small 14, caption 12), fluid between phone and desktop. */
  --font-display: var(--wd-font-display);
  --font-body: var(--wd-font-text);
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.375rem, 1.8rem + 2.6vw, 3.5rem);
  --leading-tight: 1.12;
  --leading: 1.625;
  --tracking-label: 0.1em;
  --measure: 60ch;

  /* Space */
  --space-1: var(--wd-space-1);
  --space-2: var(--wd-space-2);
  --space-3: var(--wd-space-3);
  --space-4: var(--wd-space-4);
  --space-5: var(--wd-space-5);
  --space-6: var(--wd-space-6);
  --space-7: var(--wd-space-7);
  --space-8: var(--wd-space-8);
  --space-9: var(--wd-space-9);
  --gutter: clamp(16px, 4vw, 40px);
  --page: 72rem;

  /* Shape */
  --radius-sm: var(--wd-radius-sm);
  --radius-md: var(--wd-radius-md);
  --radius-lg: var(--wd-radius-lg);
  --radius-xl: var(--wd-radius-xl);
  --radius-pill: var(--wd-radius-pill);
  --shadow: 0 1px 2px rgb(29 42 34 / 0.06), 0 10px 30px rgb(29 42 34 / 0.07);

  /* Charts (brand chart rules) */
  --chart-line: 2.5px;
  --estimate-dash: 6 5;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --line-strong: #3d5044;
    --device: #3d5044;
    --meal: #ff855c;
    --meds: #b894ff;
    --water: #40cceb;
    --weigh: #669eff;
    --fast: #858ffa;
    --move: #40cc94;
    --protein: #ff7aa8;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --line-strong: #3d5044;
  --device: #3d5044;
  --meal: #ff855c;
  --meds: #b894ff;
  --water: #40cceb;
  --weigh: #669eff;
  --fast: #858ffa;
  --move: #40cc94;
  --protein: #ff7aa8;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.25);
}