/* ============================================================ Wahana Totalita — tokens.css TWO-LAYER DESIGN TOKEN SYSTEM ------------------------------------------------------------ Layer 1: Palette Layer (Raw values). The ONLY place raw hex/rgb values are declared. Direct usage in components/pages is FORBIDDEN. Layer 2: Semantic Layer (System tokens). Every page, component, and utility MUST reference these semantic tokens (e.g., var(--brand), var(--cta), var(--text), var(--surface), var(--on-brand)). Rule: Pages use semantic tokens only. Zero hardcoded colors. ============================================================ */ :root { --mobile-nav-ink: #123E5D; --mobile-nav-muted: #60758F; --lead-action: #D83F07; --lead-action-hover: #B83305; /* ─── 1. PALETTE LAYER (Raw Values) ────────────────────────── */ --green-950: #051c14; --green-900: #081c15; --green-800: #1b4332; --green-700: #2d6a4f; --green-600: #40916c; --green-500: #52b788; --green-400: #74c69d; --green-200: #b7e4c7; --green-100: #d8f3dc; --green-50: #f0fdf4; --orange-900: #7c2d12; --orange-800: #9a3412; --orange-700: #c2410c; --orange-600: #b45309; --orange-500: #d97706; --orange-400: #f59e0b; --orange-300: #fcd34d; --orange-100: #fef3c7; --orange-50: #fffbeb; --slate-950: #020617; --slate-900: #0F172A; --slate-800: #1E293B; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; --warm-50: #F6F6F0; --surface-warm: var(--warm-50); --pure-white: #FFFFFF; --pure-black: #000000; --emerald-600: #16A34A; --emerald-800: #166534; --emerald-50: #F0FDF4; --emerald-100: #DCFCE7; --emerald-200: #BBF7D0; --red-600: #DC2626; --red-800: #991B1B; --red-50: #FEE2E2; --red-200: #FECACA; --amber-500: #F59E0B; --amber-700: #B45309; --amber-900: #92400E; --amber-50: #FEF3C7; --amber-200: #FDE68A; --blue-600: #2563EB; --blue-800: #1E40AF; --blue-50: #EFF6FF; --blue-200: #BFDBFE; --wa-green: #25D366; --wa-dark: #20BA5A; /* ─── 2. SEMANTIC LAYER ────────────────────────────────────── */ /* Brand Identity (Deep Forest & Safety Emerald) */ --brand: var(--green-800); --brand-dark: var(--green-900); --brand-mid: var(--green-700); --brand-light: var(--green-50); --accent: var(--green-700); --accent-dark: var(--green-800); --accent-light: var(--green-50); --accent-soft: var(--green-500); /* Call-To-Action (High-Conversion Action Orange) */ --cta: var(--orange-500); --cta-hover: var(--orange-600); --cta-soft: var(--orange-100); /* Surfaces & Canvas */ --surface: var(--pure-white); --surface-subtle: var(--slate-50); --surface-alt: var(--slate-100); /* Typography / Text Content */ --text: var(--slate-900); --text-muted: var(--slate-600); --text-subtle: var(--slate-500); /* Contrast Text On Dark / Colored Surfaces */ --on-brand: var(--pure-white); --on-cta: var(--pure-white); --overlay-hero: color-mix(in srgb, var(--slate-900) 62%, transparent); /* dark scrim over header photos */ /* Borders & Dividers */ --border: var(--slate-200); --border-card: rgba(226, 232, 240, 0.9); /* Communication Channels */ --whatsapp: var(--wa-green); --whatsapp-dark: var(--wa-dark); /* Status Tokens */ --success: var(--emerald-600); --success-dark: var(--emerald-800); --success-bg: var(--emerald-50); --success-soft: var(--emerald-100); --success-border: var(--emerald-200); --danger: var(--red-600); --danger-dark: var(--red-800); --danger-bg: var(--red-50); --danger-border: var(--red-200); --warning: var(--amber-500); --warning-dark: var(--amber-700); --warning-text: var(--amber-900); --warning-bg: var(--amber-50); --warning-border: var(--amber-200); --info: var(--blue-600); --info-dark: var(--blue-800); --info-bg: var(--blue-50); --info-border: var(--blue-200); /* Typography Stacks (Default ID) */ --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', system-ui, -apple-system, sans-serif; --font-heading: 'Lexend', 'Lexend Fallback', system-ui, -apple-system, sans-serif; /* Layout & Elevations (Stripe Multi-Layer Soft Shadows) */ --container: 1200px; --nav-h: 68px; --radius-sm: 8px; --radius: 16px; --radius-md: 16px; --radius-lg: 20px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(50, 50, 93, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04), 0 10px 20px -3px rgba(50, 50, 93, 0.06); --shadow-lg: 0 18px 32px -8px rgba(50, 50, 93, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06); /* Motion Tokens */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-menu: cubic-bezier(0.16, 1, 0.3, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-quart: cubic-bezier(.77, 0, .175, 1); --ease-out-back: cubic-bezier(.34, 1.3, .64, 1); --dur-fast: 150ms; --dur-hover: 180ms; --dur-base: 250ms; --dur-menu: 280ms; --dur-slow: 400ms; --dur-enter: 560ms; --lift-sm: translateY(-2px); --lift-md: translateY(-4px); --lift-lg: translateY(-6px); /* ─── 3. DEPRECATED LEGACY ALIASES (Backward Compatibility) ──── */ --green: var(--brand); /* deprecated: use var(--brand) */ --green-dark: var(--brand-dark); /* deprecated: use var(--brand-dark) */ --green-mid: var(--brand-mid); /* deprecated: use var(--brand-mid) */ --green-light: var(--brand-light); /* deprecated: use var(--brand-light) */ --orange: var(--cta); /* deprecated: use var(--cta) */ --orange-dark: var(--cta-hover); /* deprecated: use var(--cta-hover) */ --orange-light: var(--cta-soft); /* deprecated: use var(--cta-soft) */ --ink: var(--text); /* alias: backward compatible */ --mut: var(--text-muted); /* alias: backward compatible */ --text-light: var(--text-subtle); /* deprecated: use var(--text-subtle) */ --navy: var(--text); /* deprecated: use var(--text) */ --navy-light: var(--slate-700); /* deprecated: use var(--slate-700) */ --n900: var(--brand-dark); /* deprecated: use var(--brand-dark) */ --n800: var(--brand); /* deprecated: use var(--brand) */ --n700: var(--brand-mid); /* deprecated: use var(--brand-mid) */ --n100: var(--brand-light); /* deprecated: use var(--brand-light) */ --o500: var(--cta); /* deprecated: use var(--cta) */ --o400: var(--warning); /* deprecated: use var(--warning) */ --o100: var(--cta-soft); /* deprecated: use var(--cta-soft) */ --orange-hover: var(--cta-hover); /* deprecated: use var(--cta-hover) */ --black: var(--pure-black); /* alias */ --border-color: var(--border); /* deprecated: use var(--border) */ --bg-card: var(--surface); /* deprecated: use var(--surface) */ --bg-subtle: var(--surface-alt); /* deprecated: use var(--surface-alt) */ --text-heading: var(--text); /* deprecated: use var(--text) */ --warning-light: var(--warning-bg); /* deprecated: use var(--warning-bg) */ } /* Language-specific typography stacks */ html[lang="en"] { --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif; --font-heading: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, sans-serif; } html[lang="zh"], html[lang="zh-Hans"] { --font-body: 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif; --font-heading: 'Noto Sans SC', system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms !important; --dur-hover: 0ms !important; --dur-base: 0ms !important; --dur-menu: 0ms !important; --dur-slow: 0ms !important; --dur-enter: 0ms !important; --lift-sm: none !important; --lift-md: none !important; --lift-lg: none !important; } }