/* Design tokens. Every colour, size and shadow the app uses is defined here, once, for light and dark.
   Meaning is never carried by colour alone: every state also has a word and a shape. */
:root {
  color-scheme: light dark;

  /* Surfaces and ink */
  --paper: #f7f5f0;
  --paper-2: #efece3;
  --card: #ffffff;
  --ink: #16181d;
  --ink-2: #464b58;
  --ink-3: #5f6472;
  --line: #e4e0d4;
  --line-2: #d0cabb;

  /* Brand: deep teal for the twin, warm coral for the person. The two halves of the mark. */
  --brand: #0b5d50;
  --brand-hover: #084a40;
  --brand-ink: #ffffff;
  --brand-soft: #e2f0ec;
  --brand-line: #b6d8cf;
  --warm: #c4471c;
  --warm-soft: #fbe9e0;

  /* Status */
  --ok: #17724a;
  --ok-soft: #e2f3ea;
  --warn: #8a5300;
  --warn-soft: #fff0d3;
  --bad: #b3261e;
  --bad-soft: #fce8e6;
  --info: #274690;
  --info-soft: #e6ecfb;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4vw, 4.1rem);

  /* Shape, depth, motion */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-1: 0 1px 2px rgb(22 24 29 / 6%), 0 1px 1px rgb(22 24 29 / 4%);
  --shadow-2: 0 6px 18px -6px rgb(22 24 29 / 14%), 0 2px 6px rgb(22 24 29 / 6%);
  --shadow-3: 0 24px 48px -18px rgb(22 24 29 / 26%), 0 8px 16px rgb(22 24 29 / 8%);
  --ring: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--brand);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --max: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1216;
    --paper-2: #161a20;
    --card: #181c23;
    --ink: #eceef3;
    --ink-2: #b9bfcc;
    --ink-3: #9299a9;
    --line: #2a303b;
    --line-2: #3a4150;
    --brand: #4cc9ae;
    --brand-hover: #74dcc5;
    --brand-ink: #06231d;
    --brand-soft: #113a33;
    --brand-line: #1d5a4f;
    --warm: #ff8d63;
    --warm-soft: #3a2018;
    --ok: #62d49b;
    --ok-soft: #123626;
    --warn: #f2b559;
    --warn-soft: #3a2b0d;
    --bad: #ff948b;
    --bad-soft: #3d1a17;
    --info: #9db4ff;
    --info-soft: #1a2547;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2: 0 8px 22px -8px rgb(0 0 0 / 55%);
    --shadow-3: 0 28px 56px -20px rgb(0 0 0 / 70%);
  }
}