/* Evergreen — generated from tokens.json. Edit tokens.json, then run build-tokens.mjs; do not hand-edit values here. */

:root, [data-theme="light"] {
  --canvas: #f3f5f4;
  --glow-mint: #c9e7dc;
  --glow-peach: #fbe3d3;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.72);
  --sunken: #e8eeec;
  --line: rgba(15, 45, 41, 0.08);
  --forest: #0f2d29;
  --forest-hover: #1b3f3a;
  --on-forest: #f1f6f4;
  --on-forest-muted: #9fb5b0;
  --mint: #7fc8b0;
  --on-mint: #0f2d29;
  --mint-soft: #ddf1ea;
  --peach: #d9693a;
  --peach-soft: #fde6da;
  --peach-ink: #9a4a28;
  --text: #14201e;
  --text-2: #55625f;
  --text-3: #61706c;
  --success: #16704d;
  --danger: #b83a26;
  --tooltip: #14201e;
  --on-tooltip: #ffffff;
  --shadow-card: 0 1px 2px rgba(15, 45, 41, 0.04), 0 8px 24px rgba(15, 45, 41, 0.06);
  --shadow-lift: 0 2px 4px rgba(15, 45, 41, 0.05), 0 18px 40px rgba(15, 45, 41, 0.12);
  --shadow-rail: 0 12px 32px rgba(15, 45, 41, 0.28);
  --shadow-glow: 0 0 0 6px rgba(127, 200, 176, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b1715;
    --glow-mint: #12302a;
    --glow-peach: #2a1e18;
    --surface: #13231f;
    --glass: rgba(255, 255, 255, 0.05);
    --sunken: #1a302b;
    --line: rgba(255, 255, 255, 0.08);
    --forest: #14403a;
    --forest-hover: #1b4d46;
    --on-forest: #eaf2ef;
    --on-forest-muted: #9fb5b0;
    --mint: #8fdcc2;
    --on-mint: #0f2d29;
    --mint-soft: #173a32;
    --peach: #f49a72;
    --peach-soft: #3a2519;
    --peach-ink: #f5a27e;
    --text: #eaf2ef;
    --text-2: #a9b8b4;
    --text-3: #8a9a96;
    --success: #4ade9b;
    --danger: #f2826c;
    --tooltip: #eaf2ef;
    --on-tooltip: #0b1715;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
    --shadow-rail: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 6px rgba(143, 220, 194, 0.22);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --canvas: #0b1715;
  --glow-mint: #12302a;
  --glow-peach: #2a1e18;
  --surface: #13231f;
  --glass: rgba(255, 255, 255, 0.05);
  --sunken: #1a302b;
  --line: rgba(255, 255, 255, 0.08);
  --forest: #14403a;
  --forest-hover: #1b4d46;
  --on-forest: #eaf2ef;
  --on-forest-muted: #9fb5b0;
  --mint: #8fdcc2;
  --on-mint: #0f2d29;
  --mint-soft: #173a32;
  --peach: #f49a72;
  --peach-soft: #3a2519;
  --peach-ink: #f5a27e;
  --text: #eaf2ef;
  --text-2: #a9b8b4;
  --text-3: #8a9a96;
  --success: #4ade9b;
  --danger: #f2826c;
  --tooltip: #eaf2ef;
  --on-tooltip: #0b1715;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-rail: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 6px rgba(143, 220, 194, 0.22);
  color-scheme: dark;
}

:root {
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  /* blur */
  --blur-glass: 16px;
  --blur-glow: 80px;
  /* duration */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-enter: 600ms;
  --dur-count: 1200ms;
  --stagger: 60ms;
  /* easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* font families */
  --font-sans: "Inter", "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif;
}

/* type styles */
.display { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.heading { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.stat { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-s { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.body-ar { font-family: var(--font-arabic); font-size: 15px; line-height: 24px; font-weight: 400; }