/* ============================================================ Design Tokens All design tokens extracted from the Material Design 3 color system. All values live exclusively in :root — no inline styles, no framework utilities. ============================================================ */ :root { /* ---------------------------------------------------------- Colors — Primary ---------------------------------------------------------- */ --color-primary: #295d55; --color-primary-container: #43766d; --color-primary-fixed: #b7ede2; --color-primary-fixed-dim: #9cd1c6; --color-on-primary: #fff; --color-on-primary-container: #c5fbef; --color-on-primary-fixed: #00201c; --color-on-primary-fixed-variant: #194f47; --color-inverse-primary: #9cd1c6; /* ---------------------------------------------------------- Colors — Secondary ---------------------------------------------------------- */ --color-secondary: #ab3526; --color-secondary-container: #ff725d; --color-secondary-fixed: #ffdad4; --color-secondary-fixed-dim: #ffb4a8; --color-on-secondary: #fff; --color-on-secondary-container: #700702; --color-on-secondary-fixed: #410000; --color-on-secondary-fixed-variant: #891c11; /* ---------------------------------------------------------- Colors — Tertiary ---------------------------------------------------------- */ --color-tertiary: #475955; --color-tertiary-container: #5f716d; --color-tertiary-fixed: #d3e7e2; --color-tertiary-fixed-dim: #b8cac6; --color-on-tertiary: #fff; --color-on-tertiary-container: #e1f5f0; --color-on-tertiary-fixed: #0e1e1c; --color-on-tertiary-fixed-variant: #394a47; /* ---------------------------------------------------------- Colors — Surface ---------------------------------------------------------- */ --color-surface: #fbf9f6; --color-surface-dim: #dcdad7; --color-surface-bright: #fbf9f6; --color-surface-container-lowest: #fff; --color-surface-container-low: #f6f3f0; --color-surface-container: #f0edea; --color-surface-container-high: #eae8e5; --color-surface-container-highest: #e4e2df; --color-surface-tint: #34675e; --color-surface-variant: #e4e2df; /* ---------------------------------------------------------- Colors — On Surface / Background ---------------------------------------------------------- */ --color-on-surface: #1b1c1a; --color-on-surface-variant: #404946; --color-background: #fbf9f6; --color-on-background: #1b1c1a; --color-inverse-surface: #30302f; --color-inverse-on-surface: #f3f0ed; /* ---------------------------------------------------------- Colors — Outline ---------------------------------------------------------- */ --color-outline: #707976; --color-outline-variant: #bfc8c5; /* ---------------------------------------------------------- Colors — Error ---------------------------------------------------------- */ --color-error: #ba1a1a; --color-error-container: #ffdad6; --color-on-error: #fff; --color-on-error-container: #93000a; /* ---------------------------------------------------------- Colors — Dark Mode Accents ---------------------------------------------------------- */ --color-dark-bg: #1b1c1a; --color-dark-bg-alt: #3f3f3d; --color-dark-border: #2d2d2b; /* ---------------------------------------------------------- Typography — Font Families ---------------------------------------------------------- */ --font-headline: 'Unbounded', sans-serif; --font-body: 'Montserrat', sans-serif; /* ---------------------------------------------------------- Typography — Font Sizes (fluid) ---------------------------------------------------------- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.5rem, 2vw + 0.5rem, 1.875rem); --text-4xl: clamp(1.875rem, 2.5vw + 0.5rem, 2.25rem); --text-5xl: clamp(2.25rem, 3vw + 0.5rem, 3rem); --text-6xl: clamp(2.5rem, 4vw + 0.5rem, 3.75rem); --text-7xl: clamp(3rem, 5vw + 0.5rem, 4.5rem); --text-8xl: clamp(3.5rem, 6vw + 0.5rem, 6rem); /* ---------------------------------------------------------- Typography — Font Weights ---------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---------------------------------------------------------- Typography — Line Heights ---------------------------------------------------------- */ --leading-tighter: 0.9; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ---------------------------------------------------------- Typography — Letter Spacing ---------------------------------------------------------- */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-ultra-wide: 0.3em; /* ---------------------------------------------------------- Spacing ---------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --max-width: 1920px; --max-width-content: 90rem; --container-padding: 2rem; --sidebar-width: 18rem; --header-height: 5rem; /* ---------------------------------------------------------- Borders — Radius ---------------------------------------------------------- */ --radius-none: 0; --radius-full: 9999px; /* ---------------------------------------------------------- Borders — Width ---------------------------------------------------------- */ --border-width: 1px; --border-width-2: 2px; --border-width-4: 4px; --border-width-6: 6px; /* ---------------------------------------------------------- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ---------------------------------------------------------- Transitions ---------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --transition-slower: 0.7s ease; /* ---------------------------------------------------------- Z-Index ---------------------------------------------------------- */ --z-sidebar: 40; --z-header: 50; --z-modal: 60; /* ---------------------------------------------------------- Glass Effect ---------------------------------------------------------- */ --glass-bg: rgba(251, 249, 246, 0.7); --glass-blur: blur(12px); }