/* Kokosend design tokens — the single source of truth for color, type, spacing,
   radius and shadow. Retune the look of the whole app here; nothing else should
   hard-code a hex, a font name, or a px spacing/radius value.

   Light palette lives on bare :root. Dark overrides are gated so a future
   `data-theme="dark"` toggle (or the OS-level preference) can switch the whole
   app without any component CSS changing — everything below reads the
   variables, never a literal color. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --color-bg: #ffffff;
  --color-surface: #f6f7f7;
  --color-surface-raised: #ffffff;
  --color-text: #1a1f1c;
  --color-divider: #e2e5e3;

  --color-accent: #0e7a3c;
  --color-accent-2: #0e7a3c;

  --color-accent-50: #f0f8f2;
  --color-accent-100: #e2f2e8;
  --color-accent-200: #c6e6d3;
  --color-accent-300: #9bd3b2;
  --color-accent-400: #62b98c;
  --color-accent-500: #2e9d62;
  --color-accent-600: #0b6733;
  --color-accent-700: #08512a;
  --color-accent-800: #0a4423;
  --color-accent-900: #052e18;

  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e7e5;
  --color-neutral-300: #d4d4d1;
  --color-neutral-400: #b7b7b3;
  --color-neutral-500: #98988f;
  --color-neutral-600: #7a7a72;
  --color-neutral-700: #5d5d57;
  --color-neutral-800: #42423e;
  --color-neutral-900: #2b2b28;

  --k-warn: #8a5a06;
  --k-warn-bg: #fbf1dc;
  --k-danger: #b91c1c;
  --k-danger-bg: #fbe7e7;

  /* Leave-type category hues — distinct on purpose (not theme colors).
     Dark variants are lightened below so chips/dots stay legible. */
  --lt-annual: #2e9d62;
  --lt-sick: #d64545;
  --lt-compassionate: #9333ea;
  --lt-maternity: #db2777;
  --lt-paternity: #2563eb;
  --lt-other: #7a7a72;

  --font-heading: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 21, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 24, 21, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 24, 21, 0.14);
}

/* Dark theme — same tokens, different values. Follows the OS preference by
   default; `<html data-theme="dark">` (or "light") pins it explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14171a;
    --color-surface: #1b1f22;
    --color-surface-raised: #21262a;
    --color-text: #eef1ee;
    --color-divider: #2e3336;

    --color-accent-50: #0d2117;
    --color-accent-100: #0f2a1c;
    --color-accent-200: #123a26;
    --color-accent-300: #185234;
    --color-accent-400: #22703f;
    --color-accent-500: #2e9d62;
    --color-accent-600: #4fbf83;
    --color-accent-700: #79d3a3;
    --color-accent-800: #a9e4c4;
    --color-accent-900: #dcf5e7;

    --color-neutral-100: #23272a;
    --color-neutral-200: #2c3134;
    --color-neutral-300: #3a4044;
    --color-neutral-400: #52585c;
    --color-neutral-500: #6c7175;
    --color-neutral-600: #8b8f92;
    --color-neutral-700: #aaadb0;
    --color-neutral-800: #ced0d2;
    --color-neutral-900: #eceeef;

    --k-warn: #e0a94a;
    --k-warn-bg: #3a2c0c;
    --k-danger: #ef7a6f;
    --k-danger-bg: #3a1414;

    --lt-annual: #4fbf83;
    --lt-sick: #ef7a6f;
    --lt-compassionate: #c084fc;
    --lt-maternity: #f472b6;
    --lt-paternity: #60a5fa;
    --lt-other: #8b8f92;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --color-bg: #14171a;
  --color-surface: #1b1f22;
  --color-surface-raised: #21262a;
  --color-text: #eef1ee;
  --color-divider: #2e3336;

  --color-accent-50: #0d2117;
  --color-accent-100: #0f2a1c;
  --color-accent-200: #123a26;
  --color-accent-300: #185234;
  --color-accent-400: #22703f;
  --color-accent-500: #2e9d62;
  --color-accent-600: #4fbf83;
  --color-accent-700: #79d3a3;
  --color-accent-800: #a9e4c4;
  --color-accent-900: #dcf5e7;

  --color-neutral-100: #23272a;
  --color-neutral-200: #2c3134;
  --color-neutral-300: #3a4044;
  --color-neutral-400: #52585c;
  --color-neutral-500: #6c7175;
  --color-neutral-600: #8b8f92;
  --color-neutral-700: #aaadb0;
  --color-neutral-800: #ced0d2;
  --color-neutral-900: #eceeef;

  --k-warn: #e0a94a;
  --k-warn-bg: #3a2c0c;
  --k-danger: #ef7a6f;
  --k-danger-bg: #3a1414;

  --lt-annual: #4fbf83;
  --lt-sick: #ef7a6f;
  --lt-compassionate: #c084fc;
  --lt-maternity: #f472b6;
  --lt-paternity: #60a5fa;
  --lt-other: #8b8f92;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.01em;
}