/* ═══════════════════════════════════════════════════════════════════════ GRYD Design System — tokens.css Confident Amber 2026 · maju.me ─────────────────────────────────────────────────────────────────────── Design tokens ONLY. Light tokens in :root, dark overrides under html[data-theme="dark"]. Extracted from styles.css so the token layer can be scanned/edited without wading through 6,000+ lines of components. Load order in : 1. tokens.css ← this file 2. styles.css 3. maju-enhancements.css ═══════════════════════════════════════════════════════════════════════ */ /* ─── GRYD Design System Tokens — Confident Amber 2026 ─── */ :root { /* ── Confident Amber Palette ─────────────────────────────────────────── */ --ink: #1F2937; /* Deep Slate — body text, high readability */ --steel: #0F172A; /* Rich Charcoal Navy — headings, nav, authority */ --charcoal: #374151; /* Mid-dark for secondary headings */ --mid: #6B7280; /* Warm mid-grey for supporting text */ --subtle: #9CA3AF; /* Muted labels, metadata */ --mist: #D1D5DB; /* Light borders, ghost text */ --ghost: #F3EFE8; /* Soft sand — cards, quote bg, subtle highlights */ --canvas: #FAF7F0; /* Warm Ivory — site background */ --white: #FAF7F0; /* Warm Ivory used wherever white was (cards, etc) */ --true-white:#FFFFFF; /* Pure white for text-on-dark only */ --amber: #EAB308; /* Golden Amber — CTA, accent, metrics */ --amber-lift:#FACC15; /* Bright Amber Lift — hover, focus glow */ --amber-bg: #FEF9C3; /* Pale amber tint for chip/badge backgrounds */ --amber-dark:#92400E; /* Deep amber for text on amber-bg (WCAG AA+) */ --sand: #EDE4D8; /* Soft Sand — cards, dividers, blueprint sections */ --linen: #F0E9DB; /* Warm Linen — borders, subtle rules */ /* Legacy semantic aliases kept for component compatibility */ --teal: #0F172A; /* Replaced by charcoal navy for hover/active */ --teal-bg: #EDE4D8; /* → Soft Sand */ --blueprint: #92400E; /* Replaced by deep amber for links */ --blueprint-bg: #FEF9C3;/* → Pale amber */ --coral: #B45309; /* Warm amber-brown for healthcare chip */ --coral-bg: #FEF3C7; /* Warm amber tint */ --emerald: #EAB308; /* Status dot → Golden Amber */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 4px 8px -2px rgba(15,23,42,0.06); --shadow-md: 0 2px 6px rgba(15,23,42,0.04), 0 10px 20px -4px rgba(15,23,42,0.08); --shadow-lg: 0 4px 12px rgba(15,23,42,0.05), 0 20px 40px -8px rgba(15,23,42,0.12); --grid-line: rgba(234,179,8,0.08); /* subtle amber tint to grid lines */ --border: rgba(15,23,42,0.09); --border-mid: rgba(15,23,42,0.15); --font-sans: 'Plus Jakarta Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --nav-h: 57px; } /* ─── Dark Mode Tokens — Confident Amber ─── */ html[data-theme="dark"] { --ink: #F0EEE9; --steel: #E8E4DB; --charcoal: #C4C1BA; --mid: #A8A49E; --subtle: #807C77; --mist: #4A4845; --ghost: #2A2826; --canvas: #161410; /* very warm dark, hint of amber in shadows */ --white: #1E1B16; /* warm dark card bg */ --true-white: #FFFFFF; --amber: #FACC15; /* Bright Amber Lift — pops on dark bg */ --amber-lift: #FDE047; /* Even brighter for hover on dark */ --amber-bg: #2C2108; --amber-dark: #FDE047; --sand: #2A2519; --linen: #312C1F; --teal: #EAB308; /* semantic alias → amber in dark mode */ --teal-bg: #2C2108; --blueprint: #FACC15; --blueprint-bg: #2C2108; --coral: #FBB040; --coral-bg: #2A1D08; --emerald: #FACC15; /* status dot → amber in dark mode */ --grid-line: rgba(234,179,8,0.06); --border: rgba(240,238,233,0.11); --border-mid: rgba(240,238,233,0.20); --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 4px 8px -2px rgba(0,0,0,0.3); --shadow-md: 0 2px 6px rgba(0,0,0,0.25), 0 10px 20px -4px rgba(0,0,0,0.35); --shadow-lg: 0 4px 12px rgba(0,0,0,0.3), 0 20px 40px -8px rgba(0,0,0,0.45); } html[data-theme="dark"] body { background: var(--canvas); color: var(--ink); } html[data-theme="dark"] .site-header { background: rgba(22,20,16,0.90); border-color: var(--border); } html[data-theme="dark"] .site-header.scrolled { background: rgba(30,27,22,0.96); } html[data-theme="dark"] .premium-card { background: var(--white); } html[data-theme="dark"] .case-card { background: var(--white); } html[data-theme="dark"] .case-preview { background: var(--ghost); } html[data-theme="dark"] .domain-strip { background: var(--white); } html[data-theme="dark"] footer { background: var(--white); } html[data-theme="dark"] #leadership { background: var(--canvas); } html[data-theme="dark"] section[style*="background: var(--white)"], html[data-theme="dark"] section[style*="background:var(--white)"] { background: var(--white) !important; } /* Dark mode: chip readability fixes — ensure chip text contrast on deep bg */ html[data-theme="dark"] .chip-fintech { background: #0F2340; color: #82C4F8; border-color: rgba(112,181,240,0.25); } html[data-theme="dark"] .chip-designops { background: #2C2008; color: #F0B040; border-color: rgba(240,170,56,0.25); } html[data-theme="dark"] .chip-genai { background: #2C2108; color: #FACC15; border-color: rgba(234,179,8,0.28); } html[data-theme="dark"] .chip-healthcare { background: #2A0F0F; color: #F48888; border-color: rgba(240,120,120,0.25); } html[data-theme="dark"] .chip-leadership { background: var(--ghost); color: var(--charcoal); border-color: var(--border-mid); } html[data-theme="dark"] .chip-logistics { background: var(--ghost); color: var(--charcoal); border-color: var(--border-mid); } html[data-theme="dark"] .chip-product { background: #0D1A3A; color: #7AAAF8; border-color: rgba(122,170,248,0.25); } html[data-theme="dark"] .chip-service { background: #2C1A06; color: #F0A050; border-color: rgba(240,160,80,0.25); }