/* The design tokens, served at /tokens.css before /style.css: every colour, size, gap, corner and
   shadow the screens use, named once here. Light first; dark follows the phone's or computer's
   own setting (prefers-color-scheme). One accent (evergreen) on warm greys. look.test.ts checks
   each text-on-background pair below reads at 4.5:1 or better, in both themes. */

:root {
  color-scheme: light dark;

  /* Colour: surfaces */
  --bg: #f6f5f1;            /* the page behind everything */
  --surface: #ffffff;       /* cards, panels */
  --surface-2: #efede7;     /* sunken areas, inputs on cards, the tab bar */
  --border: #dcd8cf;
  --border-strong: #827d71; /* box and button outlines: 3:1 or better on every surface */

  /* Colour: text */
  --text: #1d1c19;
  --text-muted: #5b5850;
  --text-on-accent: #ffffff;

  /* Colour: the one accent, and its quiet tint */
  --accent: #0d6b5b;
  --accent-hover: #0a5749;
  --accent-soft: #e2f0ec;
  --accent-soft-text: #0a4f43;

  /* Colour: states. "Pending" is the not-saved-yet look of a confirm card. */
  --pending: #8a5a00;
  --pending-soft: #fbf0d9;
  --pending-soft-text: #6b4600;
  --danger: #a3341f;
  --danger-soft: #fbe7e2;
  --danger-soft-text: #85281a;
  --ok-soft: #e2f0ec;
  --ok-soft-text: #0a4f43;
  --neutral-soft: #ebe8e1;
  --neutral-soft-text: #45423b;
  --focus: #1a6fd1;

  /* Colour: life areas (the shell's bubbles). Each hue has a tinted fill, a stronger ring and icon,
     and a text colour that reads on its fill. Which area gets which hue is data
     (chat/shell/shell.settings.json "areas"); a new area picks one of these names. */
  --area-green-fill: #dcefe8;
  --area-green-ring: #0d6b5b;
  --area-green-text: #0a4f43;
  --area-coral-fill: #fbe3de;
  --area-coral-ring: #c2452f;
  --area-coral-text: #8e2a1a;
  --area-amber-fill: #fbecc9;
  --area-amber-ring: #a86a00;
  --area-amber-text: #6b4600;
  --area-blue-fill: #dfe9f7;
  --area-blue-ring: #2f64b0;
  --area-blue-text: #1d4580;
  --area-violet-fill: #ebe3f6;
  --area-violet-ring: #7347b0;
  --area-violet-text: #4f2d80;
  --area-neutral-fill: #efede7;
  --area-neutral-ring: #8a857a;
  --area-neutral-text: #45423b;

  /* Type: the system's own fonts, so it looks native on every phone */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;  /* 13px: notes, chips */
  --text-sm: 0.9375rem;  /* 15px: secondary lines */
  --text-md: 1rem;       /* 16px: body (keeps phones from zooming into inputs) */
  --text-lg: 1.1875rem;  /* 19px: card titles */
  --text-xl: 1.5rem;     /* 24px: section titles */
  --text-2xl: 1.875rem;  /* 30px: the screen's title */
  --leading: 1.5;
  --leading-tight: 1.25;

  /* Space: a 4px step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(29 28 25 / 0.06), 0 1px 1px rgb(29 28 25 / 0.04);
  --shadow-2: 0 4px 16px rgb(29 28 25 / 0.10), 0 1px 3px rgb(29 28 25 / 0.08);
  --ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus);

  /* Sizes */
  --touch: 44px;          /* the smallest thing a thumb presses */
  --content: 720px;       /* the reading width */
  --tabbar: 64px;
  --sidebar: 220px;
  --speed: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131412;
    --surface: #1c1e1b;
    --surface-2: #252823;
    --border: #353831;
    --border-strong: #767a70;

    --text: #ecebe6;
    --text-muted: #a9a69d;
    --text-on-accent: #0b1f1b;

    --accent: #5cc2ad;
    --accent-hover: #7ad3c1;
    --accent-soft: #173029;
    --accent-soft-text: #9fe0d2;

    --pending: #e8b75a;
    --pending-soft: #33280f;
    --pending-soft-text: #f2cd85;
    --danger: #f08a75;
    --danger-soft: #3a1d17;
    --danger-soft-text: #f5ab9b;
    --ok-soft: #173029;
    --ok-soft-text: #9fe0d2;
    --neutral-soft: #2c2f2a;
    --neutral-soft-text: #cfccc3;
    --focus: #7cb4ff;

    --area-green-fill: #173029;
    --area-green-ring: #5cc2ad;
    --area-green-text: #9fe0d2;
    --area-coral-fill: #3a1f1a;
    --area-coral-ring: #f08a75;
    --area-coral-text: #f5b3a4;
    --area-amber-fill: #33280f;
    --area-amber-ring: #e8b75a;
    --area-amber-text: #f2cd85;
    --area-blue-fill: #172437;
    --area-blue-ring: #7cb4ff;
    --area-blue-text: #b5d3ff;
    --area-violet-fill: #2a2038;
    --area-violet-ring: #b493e8;
    --area-violet-text: #d6c4f5;
    --area-neutral-fill: #252823;
    --area-neutral-ring: #8a8f84;
    --area-neutral-text: #cfccc3;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 6px 20px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}