/* ╔═══════════════════════════════════════════════════════════════╗ ║ EZShift Design Tokens — Material Design 3, Dark-First ║ ║ Ported from: ezhard-ezhaul/src/styles/variables.css ║ ║ Source of truth: ezhard-root/rules/design-system.md ║ ╚═══════════════════════════════════════════════════════════════╝ */ @layer tokens { :root { /* ─── Primary ──────────────────────────────────────────────── */ --md-sys-color-primary: #86d2e6; --md-sys-color-on-primary: #003641; --md-sys-color-primary-container: #004e5e; --md-sys-color-on-primary-container: #a8edff; --md-sys-color-primary-fixed: #a8edff; --md-sys-color-primary-fixed-dim: #86d2e6; --md-sys-color-on-primary-fixed: #001f28; --md-sys-color-on-primary-fixed-variant: #003641; /* ─── Secondary ────────────────────────────────────────────── */ --md-sys-color-secondary: #b0cbd2; --md-sys-color-on-secondary: #1c343a; --md-sys-color-secondary-container: #324a51; --md-sys-color-on-secondary-container: #cce8ef; --md-sys-color-secondary-fixed: #cce8ef; --md-sys-color-secondary-fixed-dim: #b0cbd2; --md-sys-color-on-secondary-fixed: #061f25; --md-sys-color-on-secondary-fixed-variant: #1c343a; /* ─── Tertiary ─────────────────────────────────────────────── */ --md-sys-color-tertiary: #bfc2ef; --md-sys-color-on-tertiary: #292c60; --md-sys-color-tertiary-container: #404478; --md-sys-color-on-tertiary-container: #e0e0ff; --md-sys-color-tertiary-fixed: #e0e0ff; --md-sys-color-tertiary-fixed-dim: #bfc2ef; --md-sys-color-on-tertiary-fixed: #131649; --md-sys-color-on-tertiary-fixed-variant: #292c60; /* ─── Error ────────────────────────────────────────────────── */ --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; /* ─── Surface Hierarchy (darkest → lightest) ────────────────── */ --md-sys-color-surface: #0f1416; --md-sys-color-surface-dim: #0f1416; --md-sys-color-surface-bright: #353a3c; --md-sys-color-on-surface: #e0e3e5; --md-sys-color-on-surface-variant: #c0c8cb; --md-sys-color-surface-container-lowest: #0a0f11; --md-sys-color-surface-container-low: #171c1f; --md-sys-color-surface-container: #1a2024; --md-sys-color-surface-container-high: #252b2e; --md-sys-color-surface-container-highest: #303638; --md-sys-color-surface-variant: #40484b; /* ─── Inverse (snack-bars, tooltips) ────────────────────────── */ --md-sys-color-inverse-surface: #e0e3e5; --md-sys-color-inverse-on-surface: #2e3335; --md-sys-color-inverse-primary: #006879; /* ─── Outline, Scrim & Shadow ──────────────────────────────── */ --md-sys-color-outline: #8a9295; --md-sys-color-outline-variant: #40484b; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* ─── Custom Semantic Colors ────────────────────────────────── */ --md-custom-color-success: #7fdb8a; --md-custom-color-on-success: #003913; --md-custom-color-success-container: #005321; --md-custom-color-on-success-container: #9af8a4; --md-custom-color-warning: #e6c86a; --md-custom-color-on-warning: #3d2e00; --md-custom-color-warning-container: #584400; --md-custom-color-on-warning-container: #ffe08a; --md-custom-color-info: #a0c9ff; --md-custom-color-on-info: #003059; --md-custom-color-info-container: #00467e; --md-custom-color-on-info-container: #d2e4ff; /* ─── Typography ───────────────────────────────────────────── */ --md-sys-typescale-display-font: 'Outfit', sans-serif; --md-sys-typescale-body-font: 'Inter', sans-serif; --md-sys-typescale-display-size: clamp(2.5rem, 6vw, 4.5rem); --md-sys-typescale-display-weight: 700; --md-sys-typescale-headline-size: clamp(1.5rem, 3vw, 2.25rem); --md-sys-typescale-headline-weight: 600; --md-sys-typescale-title-large-size: 1.375rem; --md-sys-typescale-title-large-weight: 600; --md-sys-typescale-title-medium-size: 1rem; --md-sys-typescale-title-medium-weight: 600; --md-sys-typescale-body-size: clamp(0.95rem, 1.2vw, 1.125rem); --md-sys-typescale-body-weight: 400; --md-sys-typescale-body-small-size: 0.875rem; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-label-size: 0.8125rem; --md-sys-typescale-label-weight: 500; --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-weight: 500; /* ─── Shape Scale ──────────────────────────────────────────── */ --md-sys-shape-xs: 4px; --md-sys-shape-sm: 8px; --md-sys-shape-md: 12px; --md-sys-shape-lg: 16px; --md-sys-shape-xl: 28px; --md-sys-shape-full: 9999px; /* ─── Elevation (MD3 box-shadows) ──────────────────────────── */ --md-elevation-0: none; --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30); --md-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30); --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30); --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30); --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.30); /* ─── Motion & Easing ──────────────────────────────────────── */ --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1); --md-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-motion-duration-short: 150ms; --md-motion-duration-medium: 300ms; --md-motion-duration-long: 500ms; /* ─── Spacing Scale ────────────────────────────────────────── */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* ─── Layout — MD3 Adaptive Breakpoints ────────────────────── */ --breakpoint-medium: 600px; --breakpoint-expanded: 840px; --breakpoint-large: 1200px; --breakpoint-xlarge: 1600px; /* ─── Navigation widths ────────────────────────────────────── */ --nav-rail-width: 80px; --nav-drawer-width: 256px; /* ─── Content padding ──────────────────────────────────────── */ --content-padding: clamp(1rem, 5vw, 4rem); /* ─── Touch target ─────────────────────────────────────────── */ --touch-target-min: 48px; } }