/* Design tokens. Nothing here knows about Manicule: another app takes
   this file and components.css, and themes them by redefining tokens.

   Two layers. Primitives are the raw ramps; roles say what a colour is for
   (a surface, a border, the accent). Components only ever use roles, so a
   theme is a new set of roles, and dark mode is one such set.

   The look: warm stone greys at one temperature in both themes, a single
   signal colour, Inter at 14px with hierarchy by weight rather than size,
   small radii, and depth from hairlines more than shadows. */

:root {
  color-scheme: light;

  /* Primitives */
  --stone-0: #faf9f8;
  --stone-50: #f7f5f4;
  --stone-100: #f3f1f0;
  --stone-200: #eceae8;
  --stone-300: #dad6d5;
  --stone-350: #c7c2c0;
  --stone-400: #afacab;
  --stone-500: #706e6d;
  --stone-600: #4a4847;
  --stone-700: #2e2d2d;
  --stone-800: #232222;
  --stone-900: #1c1b1b;
  --stone-1000: #171616;

  --orange-50: #fff4ee;
  --orange-100: #fde5d8;
  --orange-200: #fac7ad;
  --orange-300: #f49a72;
  --orange-400: #ee7442;
  --orange-500: #e8551f;
  --orange-600: #c94a16;
  --orange-700: #a33a10;

  /* Surfaces: the page, a quieter band (sidebars, footers), and what's
     raised on top (menus, dialogs, inputs). */
  --bg: #fff;
  --bg-subtle: var(--stone-0);
  --bg-raised: #fff;
  --bg-muted: var(--stone-100);
  --bg-hover: var(--stone-100);
  --bg-selected: var(--stone-200);
  --overlay: rgb(23 22 22 / 0.32);

  /* Text, strongest to faintest */
  --fg: var(--stone-800);
  --fg-secondary: var(--stone-600);
  --fg-muted: var(--stone-500);
  --fg-faint: #8f8b8a;

  --border: var(--stone-300);
  --border-subtle: var(--stone-200);
  --border-strong: var(--stone-350);

  /* The accent is the signal colour: what's on, current or in progress.
     The strong step carries white text, for primary buttons. */
  --accent: var(--orange-500);
  --accent-strong: var(--orange-600);
  --accent-stronger: var(--orange-700);
  --accent-subtle: var(--orange-50);
  --accent-muted: var(--orange-100);
  --accent-text: var(--orange-700);
  --on-accent: #fff;

  --success: #16885c;
  --success-subtle: #def3e9;
  --danger: #b22d30;
  --danger-subtle: #fff1ef;
  --warning: #98370a;
  --warning-subtle: #f8e5b9;

  /* The inverse surface, for toasts and tooltips */
  --inverse-bg: var(--stone-800);
  --inverse-fg: var(--stone-100);
  --inverse-muted: var(--stone-400);
  --inverse-accent: var(--orange-300);

  /* Tints, for tiles that stand in for a missing picture. A tile picks one
     by a hash of what it shows, so the same thing keeps its colour. */
  --tint-clay-bg: #f8e3d9;  --tint-clay-fg: #8a3d1c;
  --tint-sand-bg: #f4ebd2;  --tint-sand-fg: #765612;
  --tint-sky-bg: #deeaf6;   --tint-sky-fg: #24507c;
  --tint-slate-bg: #e6e8eb; --tint-slate-fg: #3a4450;
  --tint-plum-bg: #efe2f2;  --tint-plum-fg: #5e2f6e;
  --tint-sage-bg: #e2eedf;  --tint-sage-fg: #375a35;

  /* Type: one family. Most UI is 14px; headings step up in weight first. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-features: "cv11", "ss01";
  /* For long reading, where a page offers the choice. */
  --font-serif: "Literata", Georgia, "Times New Roman", serif;
  --text-xs: 12px;  --leading-xs: 16px;
  --text-sm: 13px;  --leading-sm: 18px;
  --text-md: 14px;  --leading-md: 20px;
  --text-lg: 16px;  --leading-lg: 22px;
  --text-xl: 20px;  --leading-xl: 26px;
  --text-2xl: 24px; --leading-2xl: 30px;
  --tracking: -0.015em;
  --tracking-tight: -0.025em;
  --tracking-caps: 0.05em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Space, on a 4px step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-full: 999px;

  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 36px;

  /* Depth: hairline-led, with small soft shadows. The larger two are for
     what floats: menus, then dialogs and toasts. */
  --shadow-xs: 0 1px 2px rgb(35 30 28 / 0.05);
  --shadow-sm: 0 1px 2px rgb(35 30 28 / 0.06), 0 2px 6px rgb(35 30 28 / 0.04);
  --shadow-md: 0 1px 2px rgb(35 30 28 / 0.06), 0 10px 28px -6px rgb(35 30 28 / 0.16);
  --shadow-lg: 0 2px 4px rgb(35 30 28 / 0.06), 0 28px 56px -16px rgb(35 30 28 / 0.3);
  --ring: 0 0 0 3px var(--accent-muted);

  /* Motion: quick, settling, never bouncy */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 360ms;
}

/* Dark: the same roles, in the same warm greys. Written twice, so it
   follows the system unless a page sets data-theme="light" on <html>, and
   data-theme="dark" forces it. Keep the two blocks the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--stone-1000);
    --bg-subtle: var(--stone-900);
    --bg-raised: #211f1f;
    --bg-muted: var(--stone-800);
    --bg-hover: #282626;
    --bg-selected: var(--stone-700);
    --overlay: rgb(0 0 0 / 0.6);
    --fg: var(--stone-200);
    --fg-secondary: #cfcbc9;
    --fg-muted: var(--stone-400);
    --fg-faint: #9a9694;
    --border: #3a3837;
    --border-subtle: #2b2929;
    --border-strong: #4d4b4a;
    --accent: #f0663a;
    --accent-strong: var(--orange-600);
    --accent-stronger: #b5410f;
    --accent-subtle: rgb(240 102 58 / 0.12);
    --accent-muted: rgb(240 102 58 / 0.24);
    --accent-text: var(--orange-300);
    --success: #3cc48d;
    --success-subtle: rgb(60 196 141 / 0.14);
    --danger: #f08a84;
    --danger-subtle: rgb(240 138 132 / 0.12);
    --warning: #e9b45c;
    --warning-subtle: rgb(233 180 92 / 0.14);
    --inverse-bg: var(--stone-200);
    --inverse-fg: var(--stone-900);
    --inverse-muted: var(--stone-500);
    --inverse-accent: var(--orange-700);
    --tint-clay-bg: rgb(232 120 80 / 0.16);   --tint-clay-fg: #f0a585;
    --tint-sand-bg: rgb(214 170 70 / 0.16);   --tint-sand-fg: #e3c47a;
    --tint-sky-bg: rgb(90 150 214 / 0.18);    --tint-sky-fg: #9cc3ea;
    --tint-slate-bg: rgb(150 160 175 / 0.16); --tint-slate-fg: #b9c1cc;
    --tint-plum-bg: rgb(170 110 190 / 0.18);  --tint-plum-fg: #d3a8e0;
    --tint-sage-bg: rgb(120 170 115 / 0.18);  --tint-sage-fg: #a9cfa5;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.25);
    --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.04), 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px -4px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.05), 0 32px 64px -12px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--stone-1000);
  --bg-subtle: var(--stone-900);
  --bg-raised: #211f1f;
  --bg-muted: var(--stone-800);
  --bg-hover: #282626;
  --bg-selected: var(--stone-700);
  --overlay: rgb(0 0 0 / 0.6);
  --fg: var(--stone-200);
  --fg-secondary: #cfcbc9;
  --fg-muted: var(--stone-400);
  --fg-faint: #9a9694;
  --border: #3a3837;
  --border-subtle: #2b2929;
  --border-strong: #4d4b4a;
  --accent: #f0663a;
  --accent-strong: var(--orange-600);
  --accent-stronger: #b5410f;
  --accent-subtle: rgb(240 102 58 / 0.12);
  --accent-muted: rgb(240 102 58 / 0.24);
  --accent-text: var(--orange-300);
  --success: #3cc48d;
  --success-subtle: rgb(60 196 141 / 0.14);
  --danger: #f08a84;
  --danger-subtle: rgb(240 138 132 / 0.12);
  --warning: #e9b45c;
  --warning-subtle: rgb(233 180 92 / 0.14);
  --inverse-bg: var(--stone-200);
  --inverse-fg: var(--stone-900);
  --inverse-muted: var(--stone-500);
  --inverse-accent: var(--orange-700);
  --tint-clay-bg: rgb(232 120 80 / 0.16);   --tint-clay-fg: #f0a585;
  --tint-sand-bg: rgb(214 170 70 / 0.16);   --tint-sand-fg: #e3c47a;
  --tint-sky-bg: rgb(90 150 214 / 0.18);    --tint-sky-fg: #9cc3ea;
  --tint-slate-bg: rgb(150 160 175 / 0.16); --tint-slate-fg: #b9c1cc;
  --tint-plum-bg: rgb(170 110 190 / 0.18);  --tint-plum-fg: #d3a8e0;
  --tint-sage-bg: rgb(120 170 115 / 0.18);  --tint-sage-fg: #a9cfa5;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.04), 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px -4px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.05), 0 32px 64px -12px rgb(0 0 0 / 0.7);
}