/* Design tokens for the Work Calendar. Every colour in the app comes from here.
   Light is the default; dark applies when Windows is dark (unless you picked Light) or when you pick Dark.
   The 8 vivid colours are the same in both themes; each has an ink (text colour) chosen for contrast. */

:root {
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* the vivid palette (areas, statuses, charts) */
  --coral: #F25C4A;  --coral-ink: #FFFFFF;
  --orange: #FDAB3D; --orange-ink: #1D1F2B;
  --sun: #FFCB00;    --sun-ink: #1D1F2B;
  --green: #00C875;  --green-ink: #10241A;
  --teal: #2EC4B6;   --teal-ink: #0E2523;
  --blue: #3B82F6;   --blue-ink: #FFFFFF;
  --purple: #A25DDC; --purple-ink: #FFFFFF;
  --pink: #E64CA8;   --pink-ink: #FFFFFF;

  /* light theme */
  --bg: #F3F5FA;
  --surface: #FFFFFF;
  --surface-2: #F8F9FC;
  --sunken: #ECEFF6;
  --hover: #F1F3F9;
  --border: #E2E6EF;
  --border-strong: #CDD3E1;
  --text: #1D2232;
  --text-2: #535B70;
  --text-3: #838CA2;

  --accent: #F25C4A;
  --accent-hover: #E0493A;
  --accent-ink: #FFFFFF;
  --accent-soft: #FFEDEA;
  --accent-text: #C93A29;

  --ok: #00A862;   --ok-soft: #DDF7EA;
  --warn: #C77700; --warn-soft: #FFF1D6;
  --bad: #D93650;  --bad-soft: #FDE4E8;

  --busy: #E8EBF2;
  --busy-text: #626B80;
  --busy-stripe: rgba(98, 107, 128, .07);

  --shadow-sm: 0 1px 2px rgba(23, 30, 55, .06);
  --shadow: 0 1px 2px rgba(23, 30, 55, .05), 0 6px 20px rgba(23, 30, 55, .07);
  --shadow-lg: 0 14px 44px rgba(23, 30, 55, .18);
  --ring: 0 0 0 3px rgba(59, 130, 246, .35);

  color-scheme: light;
}

/* dark theme, written twice: once for "follow Windows", once for "I picked Dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161727;
    --surface: #20223A;
    --surface-2: #252842;
    --sunken: #1A1C2F;
    --hover: #2A2D49;
    --border: #2F3350;
    --border-strong: #424766;
    --text: #EEF0FA;
    --text-2: #B3B8D2;
    --text-3: #828AAA;
    --accent-hover: #FF6B5B;
    --accent-soft: rgba(255, 107, 91, .15);
    --accent-text: #FF8A7D;
    --ok: #3DDC97;   --ok-soft: rgba(0, 200, 117, .16);
    --warn: #FFB547; --warn-soft: rgba(253, 171, 61, .16);
    --bad: #FF6B81;  --bad-soft: rgba(226, 68, 92, .18);
    --busy: #292C46;
    --busy-text: #A3A9C6;
    --busy-stripe: rgba(255, 255, 255, .035);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px rgba(96, 155, 255, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161727;
  --surface: #20223A;
  --surface-2: #252842;
  --sunken: #1A1C2F;
  --hover: #2A2D49;
  --border: #2F3350;
  --border-strong: #424766;
  --text: #EEF0FA;
  --text-2: #B3B8D2;
  --text-3: #828AAA;
  --accent-hover: #FF6B5B;
  --accent-soft: rgba(255, 107, 91, .15);
  --accent-text: #FF8A7D;
  --ok: #3DDC97;   --ok-soft: rgba(0, 200, 117, .16);
  --warn: #FFB547; --warn-soft: rgba(253, 171, 61, .16);
  --bad: #FF6B81;  --bad-soft: rgba(226, 68, 92, .18);
  --busy: #292C46;
  --busy-text: #A3A9C6;
  --busy-stripe: rgba(255, 255, 255, .035);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(96, 155, 255, .45);
  color-scheme: dark;
}

/* colour helpers: class="c-blue" sets --c / --c-ink for pills, dots and stripes */
.c-coral  { --c: var(--coral);  --c-ink: var(--coral-ink); }
.c-orange { --c: var(--orange); --c-ink: var(--orange-ink); }
.c-sun    { --c: var(--sun);    --c-ink: var(--sun-ink); }
.c-green  { --c: var(--green);  --c-ink: var(--green-ink); }
.c-teal   { --c: var(--teal);   --c-ink: var(--teal-ink); }
.c-blue   { --c: var(--blue);   --c-ink: var(--blue-ink); }
.c-purple { --c: var(--purple); --c-ink: var(--purple-ink); }
.c-pink   { --c: var(--pink);   --c-ink: var(--pink-ink); }
.c-grey   { --c: var(--border-strong); --c-ink: var(--text); }