/* Whattodo tokens - the :root of the Broadsheet design system the v13 MVP design is built on.
   Screen markup uses these variables directly (var(--color-*)), exactly as the design does. */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  /* The third process ink — review round 3: the deck's print treatments
     (the CMYK separation and the misregistered plate numerals below) need
     the full four-color set. Cyan and magenta are the system's own accents;
     this yellow completes them, muted to the same press-ink register. A
     print treatment color, not an interface accent — body copy and chrome
     never take it. */
  --color-process-yellow: #edbb00;

  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading-weight: 600;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;

  --space-1: 5.0px;
  --space-2: 10.0px;
  --space-3: 15.0px;
  --space-4: 20.0px;
  --space-6: 30.0px;
  --space-8: 40.0px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* Elevation used across the design's cards, as one token. */
:root{
  --lift: 0 0 0 0.5px color-mix(in srgb, var(--color-text) 9%, transparent), 0 1px 2px color-mix(in srgb, var(--color-text) 5%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--color-text) 28%, transparent);
  --ring: inset 0 0 0 0.5px color-mix(in srgb, var(--color-text) 16%, transparent);
  --ring-14: inset 0 0 0 0.5px color-mix(in srgb, var(--color-text) 14%, transparent);
  --grad-primary: linear-gradient(180deg, var(--color-accent-500), var(--color-accent-600));
  --shadow-primary: inset 0 1px 0 color-mix(in srgb, var(--color-bg) 35%, transparent), 0 12px 24px -10px color-mix(in srgb, var(--color-accent) 80%, transparent);
}