/* * Chepe Teal Breeze — Design Token System (Section 6.2) * * THEME NAME: "Chepe Teal Breeze" * * PALETTE (6 colours — NEVER use raw hex anywhere else in the codebase): * --ctb-eerie-black #161615 background / primary text in Light Mode * --ctb-baby-powder #FFFFFD background / primary text in Dark Mode * --ctb-jungle-green #00A682 primary action; success accent (Dark Mode) * --ctb-selective-yellow #FFBB00 primary CTA (Light Mode); highlights/badges * --ctb-tropical-rain-forest #00745B cards / dividers; success accent (Light Mode) * --ctb-bu-red #CA0A0A error / failure in BOTH modes * * TWO MODES: * Dark Mode (default / fallback) — Baby Powder bg, "fresh notebook" feel * Light Mode (eye-care dark) — Eerie Black bg, late-night study sessions * * MODE SELECTION LOGIC (managed by chepe-theme.js): * 1. Respect user's saved preference in localStorage('chepe-theme') * 2. If none, respect system prefers-color-scheme: dark → Light Mode * 3. Fallback: Dark Mode */ /* ══════════════════════════════════════════════════════════════════════════ LAYER 1 — BASE PALETTE (invariant; never changes with mode) ══════════════════════════════════════════════════════════════════════════ */ :root { --ctb-eerie-black: #161615; --ctb-baby-powder: #FFFFFD; --ctb-jungle-green: #00A682; --ctb-selective-yellow: #FFBB00; --ctb-tropical-rain-forest: #00745B; --ctb-bu-red: #CA0A0A; --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 24px; --md-sys-shape-corner-full: 9999px; --chepe-elevation-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14); --chepe-elevation-2: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.12); --chepe-elevation-3: 0 10px 20px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.10); --chepe-space-xs: 4px; --chepe-space-sm: 8px; --chepe-space-md: 16px; --chepe-space-lg: 24px; --chepe-space-xl: 32px; --chepe-space-2xl: 48px; --chepe-space-3xl: 64px; --chepe-nav-width: 80px; --chepe-nav-expanded-width: 256px; } /* ══════════════════════════════════════════════════════════════════════════ LAYER 2 — DARK MODE (DEFAULT — Baby Powder bg, "fresh notebook") ══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { --ctb-color-background: var(--ctb-baby-powder); --ctb-color-surface: #FFFFFF; --ctb-color-surface-variant: #F5F5F3; --ctb-color-surface-container: rgba(0, 116, 91, 0.08); --ctb-color-text: var(--ctb-eerie-black); --ctb-color-text-secondary: rgba(22, 22, 21, 0.65); --ctb-color-text-disabled: rgba(22, 22, 21, 0.38); --ctb-color-primary: var(--ctb-jungle-green); --ctb-color-on-primary: var(--ctb-baby-powder); --ctb-color-primary-container: rgba(0, 166, 130, 0.12); --ctb-color-on-primary-container: var(--ctb-tropical-rain-forest); --ctb-color-secondary: var(--ctb-selective-yellow); --ctb-color-on-secondary: var(--ctb-eerie-black); --ctb-color-secondary-container: rgba(255, 187, 0, 0.12); --ctb-color-on-secondary-container: var(--ctb-tropical-rain-forest); --ctb-color-tertiary: var(--ctb-tropical-rain-forest); --ctb-color-on-tertiary: var(--ctb-baby-powder); --ctb-color-tertiary-container: rgba(0, 116, 91, 0.12); --ctb-color-on-tertiary-container: var(--ctb-tropical-rain-forest); --ctb-color-error: var(--ctb-bu-red); --ctb-color-on-error: var(--ctb-baby-powder); --ctb-color-error-container: rgba(202, 10, 10, 0.08); --ctb-color-on-error-container: var(--ctb-bu-red); --ctb-color-success: var(--ctb-jungle-green); --ctb-color-success-container: rgba(0, 166, 130, 0.10); --ctb-color-on-success-container: var(--ctb-tropical-rain-forest); --ctb-color-warning: var(--ctb-selective-yellow); --ctb-color-warning-container: rgba(255, 187, 0, 0.12); --ctb-color-on-warning-container: var(--ctb-tropical-rain-forest); --ctb-color-outline: rgba(22, 22, 21, 0.20); --ctb-color-outline-variant: rgba(22, 22, 21, 0.10); --ctb-color-divider: rgba(0, 116, 91, 0.25); --ctb-color-nav-bg: #FFFFFF; --ctb-color-nav-active-bg: rgba(0, 116, 91, 0.12); --ctb-color-nav-active-text: var(--ctb-tropical-rain-forest); --ctb-color-nav-hover-bg: rgba(0, 166, 130, 0.08); --ctb-color-chip-bg: rgba(0, 116, 91, 0.10); --ctb-color-chip-text: var(--ctb-tropical-rain-forest); --ctb-color-btn-neutral-bg: #F5F5F3; --ctb-color-btn-neutral-text: rgba(22, 22, 21, 0.70); --ctb-color-btn-danger-bg: rgba(202, 10, 10, 0.08); --ctb-color-btn-danger-text: var(--ctb-bu-red); --ctb-color-btn-danger-border: rgba(202, 10, 10, 0.25); --ctb-color-banner-warn-bg: rgba(255, 187, 0, 0.10); --ctb-color-banner-warn-border: var(--ctb-selective-yellow); --ctb-color-banner-cta-bg: var(--ctb-selective-yellow); --ctb-color-banner-cta-text: var(--ctb-eerie-black); --ctb-color-empty-bg: #FFFFFF; --ctb-color-empty-border: rgba(22, 22, 21, 0.15); --ctb-color-quote-bg: #F5F5F3; --ctb-color-quote-text: rgba(22, 22, 21, 0.65); --ctb-auth-gradient-from: rgba(0, 116, 91, 0.12); --ctb-focus-ring: rgba(0, 166, 130, 0.25); --chepe-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14); --chepe-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); --chepe-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10); } /* ══════════════════════════════════════════════════════════════════════════ LAYER 3 — LIGHT MODE (Eerie Black bg, "late-night study") ══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --ctb-color-background: var(--ctb-eerie-black); --ctb-color-surface: #1E1E1C; --ctb-color-surface-variant: #252523; --ctb-color-surface-container: rgba(0, 116, 91, 0.18); --ctb-color-text: var(--ctb-baby-powder); --ctb-color-text-secondary: rgba(255, 255, 253, 0.68); --ctb-color-text-disabled: rgba(255, 255, 253, 0.38); --ctb-color-primary: var(--ctb-jungle-green); --ctb-color-on-primary: var(--ctb-baby-powder); --ctb-color-primary-container: rgba(0, 166, 130, 0.20); --ctb-color-on-primary-container: var(--ctb-selective-yellow); --ctb-color-secondary: var(--ctb-selective-yellow); --ctb-color-on-secondary: var(--ctb-eerie-black); --ctb-color-secondary-container: rgba(255, 187, 0, 0.18); --ctb-color-on-secondary-container: var(--ctb-selective-yellow); --ctb-color-tertiary: var(--ctb-selective-yellow); --ctb-color-on-tertiary: var(--ctb-eerie-black); --ctb-color-tertiary-container: rgba(255, 187, 0, 0.15); --ctb-color-on-tertiary-container: var(--ctb-selective-yellow); --ctb-color-error: var(--ctb-bu-red); --ctb-color-on-error: var(--ctb-baby-powder); --ctb-color-error-container: rgba(202, 10, 10, 0.15); --ctb-color-on-error-container: #FF6B6B; --ctb-color-success: var(--ctb-tropical-rain-forest); --ctb-color-success-container: rgba(0, 116, 91, 0.18); --ctb-color-on-success-container: var(--ctb-jungle-green); --ctb-color-warning: var(--ctb-selective-yellow); --ctb-color-warning-container: rgba(255, 187, 0, 0.15); --ctb-color-on-warning-container: var(--ctb-selective-yellow); --ctb-color-outline: rgba(255, 255, 253, 0.20); --ctb-color-outline-variant: rgba(255, 255, 253, 0.10); --ctb-color-divider: rgba(0, 116, 91, 0.30); --ctb-color-nav-bg: #1E1E1C; --ctb-color-nav-active-bg: rgba(255, 187, 0, 0.15); --ctb-color-nav-active-text: var(--ctb-selective-yellow); --ctb-color-nav-hover-bg: rgba(255, 255, 253, 0.08); --ctb-color-chip-bg: rgba(255, 187, 0, 0.15); --ctb-color-chip-text: var(--ctb-selective-yellow); --ctb-color-btn-neutral-bg: #252523; --ctb-color-btn-neutral-text: rgba(255, 255, 253, 0.70); --ctb-color-btn-danger-bg: rgba(202, 10, 10, 0.15); --ctb-color-btn-danger-text: #FF6B6B; --ctb-color-btn-danger-border: rgba(202, 10, 10, 0.40); --ctb-color-banner-warn-bg: rgba(255, 187, 0, 0.10); --ctb-color-banner-warn-border: var(--ctb-selective-yellow); --ctb-color-banner-cta-bg: var(--ctb-selective-yellow); --ctb-color-banner-cta-text: var(--ctb-eerie-black); --ctb-color-empty-bg: #1E1E1C; --ctb-color-empty-border: rgba(255, 255, 253, 0.15); --ctb-color-quote-bg: #252523; --ctb-color-quote-text: rgba(255, 255, 253, 0.68); --ctb-auth-gradient-from: rgba(255, 187, 0, 0.12); --ctb-focus-ring: rgba(0, 166, 130, 0.30); --chepe-elevation-1: 0 1px 4px rgba(0, 116, 91, 0.20), 0 1px 2px rgba(0,0,0,0.30); --chepe-elevation-2: 0 3px 8px rgba(0, 116, 91, 0.18), 0 2px 4px rgba(0,0,0,0.30); --chepe-elevation-3: 0 8px 24px rgba(0, 116, 91, 0.16), 0 4px 8px rgba(0,0,0,0.30); } /* ══════════════════════════════════════════════════════════════════════════ LAYER 4 — M3 COMPATIBILITY LAYER ══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"], [data-theme="light"] { --md-sys-color-primary: var(--ctb-color-primary); --md-sys-color-on-primary: var(--ctb-color-on-primary); --md-sys-color-primary-container: var(--ctb-color-primary-container); --md-sys-color-on-primary-container: var(--ctb-color-on-primary-container); --md-sys-color-secondary: var(--ctb-color-secondary); --md-sys-color-on-secondary: var(--ctb-color-on-secondary); --md-sys-color-secondary-container: var(--ctb-color-secondary-container); --md-sys-color-on-secondary-container: var(--ctb-color-on-secondary-container); --md-sys-color-tertiary: var(--ctb-color-tertiary); --md-sys-color-on-tertiary: var(--ctb-color-on-tertiary); --md-sys-color-tertiary-container: var(--ctb-color-tertiary-container); --md-sys-color-on-tertiary-container: var(--ctb-color-on-tertiary-container); --md-sys-color-error: var(--ctb-color-error); --md-sys-color-on-error: var(--ctb-color-on-error); --md-sys-color-error-container: var(--ctb-color-error-container); --md-sys-color-on-error-container: var(--ctb-color-on-error-container); --md-sys-color-background: var(--ctb-color-background); --md-sys-color-on-background: var(--ctb-color-text); --md-sys-color-surface: var(--ctb-color-surface); --md-sys-color-on-surface: var(--ctb-color-text); --md-sys-color-surface-variant: var(--ctb-color-surface-variant); --md-sys-color-on-surface-variant: var(--ctb-color-text-secondary); --md-sys-color-outline: var(--ctb-color-outline); --md-sys-color-outline-variant: var(--ctb-color-outline-variant); --md-sys-color-inverse-surface: var(--ctb-color-text); --md-sys-color-inverse-on-surface: var(--ctb-color-background); --md-sys-color-inverse-primary: var(--ctb-color-primary); --md-sys-color-surface-tint: var(--ctb-color-primary); --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --primary: var(--ctb-color-primary); --secondary: var(--ctb-color-secondary); --danger: var(--ctb-color-error); --success: var(--ctb-color-success); --warning: var(--ctb-color-warning); }