/* Babble's design tokens: every color, font, type size, radius and shadow the page uses, named for what it's for.
   Components use only these, so changing the look means changing this file (or overriding it under a
   [data-theme] on <html>, see the end).
   Values are today's exactly; the type scale and the three shadow inks are as found, to be simplified in a
   reviewed design change (designs/architecture-review.md, step 14). */
:root {
  /* Colors. Sage daylight: soft on the eyes, still bright in the sun. */
  --color-bg: #ECEEE4;
  --color-surface: #F8F9F3;
  --color-text: #1C2114;
  --color-text-muted: #5C6352;
  --color-text-faint: #3A4130;      /* Babble's own idea of a reply, before you've talked to it */
  --color-border: #D3D8C7;
  --color-accent: #CFE07A;          /* pistachio: you, the mic, the reply — the one bold thing */
  --color-on-accent: #2C3709;
  --color-action: #3D4C12;          /* deep olive: send, focus, links, and you */
  --color-on-action: #fff;
  --color-them: #4F5A42;            /* the other person */
  --color-danger: #B3441A;
  --color-bubble-them: #DEE2D3;
  --color-bubble-me: #D6E592;
  --color-bubble-babble: #F8F9F3;

  /* The same colors as channels, for see-through uses: rgb(var(--rgb-action) / .5). */
  --rgb-action: 61 76 18;
  --rgb-accent: 207 224 122;
  --rgb-bubble-me: 214 229 146;
  --rgb-them: 79 90 66;
  --rgb-text-muted: 92 99 82;
  --rgb-danger: 179 68 26;
  /* Shadow and scrim inks: three near-blacks today (the blue one is from an older palette). */
  --rgb-shadow: 30 36 20;
  --rgb-shadow-menu: 28 33 20;
  --rgb-scrim: 26 31 46;

  /* Type. Atkinson Hyperlegible for reading at a glance; Noto Sans Devanagari for Hindi; Yellowtail for the name. */
  --font-body: "Atkinson Hyperlegible Next", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
  --font-native: "Noto Sans Devanagari", "Atkinson Hyperlegible Next", sans-serif;
  --font-logo: "Yellowtail", "Atkinson Hyperlegible Next", cursive;
  --font-script: "Yellowtail", cursive;
  /* Fourteen sizes in use today. */
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 17px;
  --text-xl: 18px;
  --text-2xl: 19px;
  --text-3xl: 20px;
  --text-4xl: 21px;
  --text-5xl: 24px;
  --text-6xl: 26px;
  --text-7xl: 28px;
  --text-display: 34px;

  /* Shapes. */
  --radius-xs: 8px;                 /* the corner a bubble points from */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-ml: 18px;
  --radius-l: 22px;
  --radius-pill: 99px;
  --radius-round: 50%;

  color-scheme: light;
  font-family: var(--font-body);
}

/* A theme overrides the tokens above, nothing else, e.g.
   :root[data-theme="dark"] { --color-bg: …; --color-text: …; color-scheme: dark; } */