/* Vitak design tokens. One place for colour, type, space, radius, depth and motion.
   Palette: Pantone 11-4201 Cloud Dancer (#F0EEE9) as the canvas. Warm tea, cocoa and caramel tones from the
   Take a Break family and a teal from Atmospheric support it, anchored by the Vitak green. Hex values other than Cloud Dancer are approximations. Light, dark and system modes. */
:root {
  color-scheme: light;
  /* Surfaces */
  --bg: #f0eee9;
  --sidebar: #e8e3d8;
  --raised: #fbfaf7;
  --sunken: #f5f2ec;
  --overlay: rgb(35 31 26 / .42);
  /* Ink */
  --ink: #231f1a;
  --ink-muted: #5c554b;
  --ink-faint: #675f54;
  --line: #ddd6c9;
  --line-strong: #c9c0af;
  /* Brand */
  --accent: #285b48;
  --accent-hover: #204a3b;
  --on-accent: #ffffff;
  --accent-text: #285b48;
  --accent-soft: #dde9e0;
  /* Semantic */
  --success: #25704a;   --success-soft: #dff0e6;
  --warning: #86570f;   --warning-soft: #f7e6c8;
  --danger: #a8302c;    --danger-soft: #f6dcd6;    --on-danger: #ffffff;
  --info: #23606b;      --info-soft: #d8e8e8;
  --neutral: #5c554b;   --neutral-soft: #e6e1d6;
  --focus: #1f6fb2;
  --caramel: #b4793e;   --caramel-soft: #f1e0cc;   --tea: #d9d0bc;
  /* Type: the Apple system stack. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-caption: 12px;  --t-footnote: 13px;  --t-subhead: 14px;  --t-body: 15px;  --t-headline: 17px;
  --t-title3: 20px;   --t-title2: 24px;    --t-title1: 30px;    --t-large: 36px;
  /* Space on a 4 / 8 pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* Shape and depth */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(35 31 26 / .06), 0 1px 1px rgb(35 31 26 / .04);
  --shadow-2: 0 4px 16px rgb(35 31 26 / .08), 0 1px 3px rgb(35 31 26 / .06);
  --shadow-3: 0 18px 48px rgb(35 31 26 / .20), 0 2px 8px rgb(35 31 26 / .10);
  --hit: 44px;
  /* Motion: short, spring-like, transform and opacity only. */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --d-fast: 140ms; --d-med: 220ms; --d-slow: 320ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151311;
  --sidebar: #100e0c;
  --raised: #1e1b18;
  --sunken: #191614;
  --overlay: rgb(0 0 0 / .6);
  --ink: #efeae2;
  --ink-muted: #aba396;
  --ink-faint: #968e81;
  --line: #2e2a25;
  --line-strong: #3e3832;
  --accent: #2f7a5e;
  --accent-hover: #38896b;
  --on-accent: #ffffff;
  --accent-text: #7dc7a5;
  --accent-soft: #1c3029;
  --success: #62c18e;   --success-soft: #17301f;
  --warning: #e0b05a;   --warning-soft: #33280f;
  --danger: #f08a82;    --danger-soft: #3a1b19;    --on-danger: #2a0f0d;
  --info: #7fc3d2;      --info-soft: #16303a;
  --neutral: #aba396;   --neutral-soft: #2a2621;
  --focus: #6db3ee;
  --caramel: #d29a5c;   --caramel-soft: #3a2c1c;   --tea: #3b362d;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 4px 16px rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3);
  --shadow-3: 0 18px 48px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);
}
/* System mode: follow the device unless a theme was chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #151311; --sidebar: #100e0c; --raised: #1e1b18; --sunken: #191614; --overlay: rgb(0 0 0 / .6);
    --ink: #efeae2; --ink-muted: #aba396; --ink-faint: #968e81; --line: #2e2a25; --line-strong: #3e3832;
    --accent: #2f7a5e; --accent-hover: #38896b; --on-accent: #ffffff; --accent-text: #7dc7a5; --accent-soft: #1c3029;
    --success: #62c18e; --success-soft: #17301f; --warning: #e0b05a; --warning-soft: #33280f;
    --danger: #f08a82; --danger-soft: #3a1b19; --on-danger: #2a0f0d; --info: #7fc3d2; --info-soft: #16303a;
    --neutral: #aba396; --neutral-soft: #2a2621; --focus: #6db3ee; --caramel: #d29a5c; --caramel-soft: #3a2c1c; --tea: #3b362d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 4px 16px rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3);
    --shadow-3: 0 18px 48px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-med: 1ms; --d-slow: 1ms; }
}