/* ========================================================================== MANGO — 01 Primitives + 02 Semantic Mirrors the Figma "Design System" page. Never hardcode a hex in a component; bind to a semantic token so the mode swap keeps working. ========================================================================== */ :root { /* --- ink ramp ------------------------------------------------------- */ --ink-025: #F6F7F9; --ink-050: #EDEFF3; --ink-100: #DDE1E8; --ink-200: #C2C8D3; --ink-300: #A2A8B5; --ink-400: #6A707F; /* fg/muted — 4.96:1 on white, 4.62:1 on bg/page */ --ink-500: #5E6779; --ink-600: #46536B; --ink-700: #2D4059; /* brand navy */ --ink-800: #223247; --ink-900: #0A0F16; /* fg/primary — 19.22:1 on white */ --ink-950: #0B0F14; /* --- amber ramp ----------------------------------------------------- */ --amber-100: #FFF3D6; --amber-200: #FFE4A6; --amber-300: #FFD16B; --amber-400: #FFC23D; --amber-500: #FFB400; /* brand amber */ --amber-600: #D99900; --amber-700: #B37E00; --amber-800: #8C6300; /* the only amber that may carry text on white */ --amber-900: #664700; /* --- base ----------------------------------------------------------- */ --white: #FFFFFF; --black: #000000; /* --- support -------------------------------------------------------- */ --support-success: #1E8E5A; --support-danger: #C43D3D; /* --- space (base 4) ------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- radius --------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; /* measured: primary button */ --radius-lg: 20px; /* measured: card */ --radius-xl: 28px; /* One step past xl, continuing the ~1.4x ramp (8/14/20/28/40). Used by the two large showcase panels — the work card and the process rows — which need a radius that reads as deliberate at 500px wide, where 28 looks like a rounding error. */ --radius-2xl: 40px; --radius-full: 999px; /* --- type scale ----------------------------------------------------- */ --fs-eyebrow: 24px; /* measured — the eyebrow is NOT tiny */ --fs-body-sm: 14px; --fs-body: 16px; --fs-body-lg: 18px; --fs-h3: 24px; --fs-h2: 30px; /* client-set: every h2 is 30, in-content ones included */ --fs-section: 30px; /* client-set; drives .h-sec, the section h2s */ --fs-hero: 36px; /* client-set; h1 stays 36 */ /* --- families ------------------------------------------------------- */ --font-fa: "Yekan Bakh FaNum", "Vazirmatn", system-ui, sans-serif; --font-en-display: "Russo One", "Yekan Bakh FaNum", sans-serif; --font-en-mono: "Michroma", "Courier New", monospace; --font-en-body: "Inter", system-ui, sans-serif; /* --- section rhythm ------------------------------------------------- One number drives the vertical spacing of every section, and the section marker hangs off it so the two never drift apart. */ --section-pad: 88px; /* --- page ground layer --------------------------------------------- The supplied background plate. `fixed` keeps it anchored to the viewport so any element that repaints the ground (the hero) lines up exactly. */ --page-bg: var(--ink-025) url("../img/bg-page.png") center / cover no-repeat fixed; /* --- motion --------------------------------------------------------- */ --ease: cubic-bezier(.22,.61,.36,1); --dur: .55s; } /* ========================================================================== 02 Semantic — Light is mode one and therefore the default. ========================================================================== */ :root, :root[data-theme="light"] { --bg-page: var(--ink-025); /* off-white ground, never pure white */ --bg-surface: var(--white); --bg-subtle: var(--ink-050); --bg-panel-dark: var(--ink-700); /* brand navy panel */ --bg-inverse: var(--ink-950); --fg-primary: var(--ink-900); /* 19.22:1 */ --fg-secondary: var(--ink-700); /* 10.56:1 */ --fg-muted: var(--ink-400); /* 4.94:1 */ --fg-on-dark: var(--white); --fg-on-dark-muted: rgba(255,255,255,.62); --accent-default: var(--amber-500); /* FILLS ONLY */ --accent-hover: var(--amber-400); --accent-pressed: var(--amber-600); --accent-text: var(--amber-800); /* accent-coloured TEXT — 5.38:1 */ --fg-on-accent: var(--ink-950); /* 10.78:1 on amber */ --border-hairline: rgba(22,33,47,.10); --border-strong: rgba(22,33,47,.22); --border-on-dark: rgba(255,255,255,.16); /* The halo ring around a button. The reference draws a 2px translucent band outside the pill; these are that band in each button's own hue. */ --ring-accent: rgba(255,180,0,.30); --ring-dark: rgba(45,64,89,.20); --shadow-card: 0 1px 2px rgba(22,33,47,.04), 0 12px 32px rgba(22,33,47,.06); --shadow-lift: 0 2px 6px rgba(22,33,47,.06), 0 24px 60px rgba(22,33,47,.12); } :root[data-theme="dark"] { --page-bg: var(--ink-950); /* the supplied plate is light-only */ --bg-page: var(--ink-950); --bg-surface: var(--ink-900); --bg-subtle: var(--ink-800); --bg-panel-dark: var(--ink-800); --bg-inverse: var(--ink-025); --fg-primary: var(--ink-025); --fg-secondary: var(--ink-100); --fg-muted: var(--ink-300); --fg-on-dark: var(--white); --fg-on-dark-muted: rgba(255,255,255,.62); --accent-default: var(--amber-500); --accent-hover: var(--amber-400); --accent-pressed: var(--amber-600); --accent-text: var(--amber-300); /* on dark the light end carries text */ --fg-on-accent: var(--ink-950); --border-hairline: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.22); --border-on-dark: rgba(255,255,255,.16); --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55); }