/* Freshyto OneWorld design tokens. Dark is the default (data-theme absent or "dark"); [data-theme="light"] overrides on . Brand hue (from the logo, ~165°) anchors both themes; luminance/saturation are tuned per mode so the same identity reads correctly on near-black and on white. */ :root { color-scheme: dark; /* Surfaces */ --bg-canvas: #0b0f0e; --bg-surface: #121917; --bg-surface-2: #182120; --bg-elevated: #1b2523; --bg-hover: rgba(255, 255, 255, .04); --bg-active: rgba(255, 255, 255, .07); /* Borders */ --border: #22302c; --border-strong: #34433f; --ring: hsl(165 85% 45% / .45); /* Text */ --text-primary: #eef3f1; --text-secondary: #a3b3ae; --text-muted: #6d7d78; --text-on-accent: #04140f; /* Brand accent (bright variant of the deep-green brand hue for dark surfaces) */ --accent: hsl(165 85% 42%); --accent-hover: hsl(165 85% 48%); --accent-active: hsl(165 85% 36%); --accent-soft-bg: hsl(165 55% 16%); --accent-soft-text: hsl(165 70% 72%); /* Secondary brand accent (lime) */ --lime: #a6ce39; --lime-soft-bg: hsl(74 45% 16%); --lime-soft-text: hsl(74 55% 72%); /* Semantic */ --success: hsl(142 68% 45%); --success-soft-bg: hsl(142 45% 15%); --success-soft-text: hsl(142 60% 70%); --warning: hsl(38 92% 55%); --warning-soft-bg: hsl(38 60% 15%); --warning-soft-text: hsl(38 85% 72%); --danger: hsl(0 72% 58%); --danger-soft-bg: hsl(0 50% 16%); --danger-soft-text: hsl(0 80% 76%); --info: hsl(199 89% 58%); --info-soft-bg: hsl(199 55% 15%); --info-soft-text: hsl(199 80% 74%); /* Chart series (distinct hues, dark-safe) */ --chart-1: hsl(165 85% 45%); --chart-2: #a6ce39; --chart-3: hsl(38 92% 58%); --chart-4: hsl(199 89% 60%); --chart-5: hsl(266 75% 68%); --chart-6: hsl(340 75% 62%); --chart-grid: #22302c; --chart-track: #182120; /* Shadows: dark surfaces barely show shadow, so elevation reads via border + faint glow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 6px 20px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45); --shadow-focus: 0 0 0 3px var(--ring); /* Typography */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: .75rem; --text-sm: .8125rem; --text-base: .875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* Spacing */ --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; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px; /* Layout */ --sidebar-width: 264px; --sidebar-width-collapsed: 72px; --topbar-height: 72px; /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --duration-fast: 120ms; --duration: 180ms; } [data-theme="light"] { color-scheme: light; --bg-canvas: #f4f7f6; --bg-surface: #ffffff; --bg-surface-2: #eef2f0; --bg-elevated: #ffffff; --bg-hover: rgba(11, 30, 24, .035); --bg-active: rgba(11, 30, 24, .06); --border: #e1e8e5; --border-strong: #c9d4cf; --ring: hsl(165 70% 32% / .35); --text-primary: #0f1917; --text-secondary: #4c5c57; --text-muted: #7c8b86; --text-on-accent: #ffffff; --accent: hsl(165 75% 27%); --accent-hover: hsl(165 75% 22%); --accent-active: hsl(165 75% 32%); --accent-soft-bg: hsl(165 55% 92%); --accent-soft-text: hsl(165 75% 22%); --lime: #7f9c2a; --lime-soft-bg: hsl(74 55% 90%); --lime-soft-text: hsl(74 60% 26%); --success: hsl(142 62% 32%); --success-soft-bg: hsl(142 55% 92%); --success-soft-text: hsl(142 65% 24%); --warning: hsl(32 85% 42%); --warning-soft-bg: hsl(38 85% 92%); --warning-soft-text: hsl(32 80% 30%); --danger: hsl(0 68% 46%); --danger-soft-bg: hsl(0 75% 94%); --danger-soft-text: hsl(0 70% 38%); --info: hsl(202 80% 40%); --info-soft-bg: hsl(202 75% 93%); --info-soft-text: hsl(202 80% 30%); --chart-1: hsl(165 75% 30%); --chart-2: #8ba82f; --chart-3: hsl(32 85% 45%); --chart-4: hsl(202 80% 42%); --chart-5: hsl(266 60% 52%); --chart-6: hsl(340 65% 46%); --chart-grid: #e1e8e5; --chart-track: #eef2f0; --shadow-sm: 0 1px 2px rgba(16, 30, 25, .06); --shadow-md: 0 8px 24px rgba(16, 30, 25, .08); --shadow-lg: 0 20px 48px rgba(16, 30, 25, .12); --shadow-focus: 0 0 0 3px var(--ring); }