/* * tokens.css — Malgo Perrien portfolio * Source of truth: index-v20.html * All pages must import this file. No colour, type, or spacing value * should ever be hard-coded anywhere on the site. * ───────────────────────────────────────────────────────────────── * ONE EXCEPTION: SVG diagram subtitle text at 14px / 12px may use * the token values directly as SVG attributes (fill="var()" does not * work in all SVG contexts), but must still reference the token VALUE * — never an off-palette colour. */ :root { /* ── COLOUR: Backgrounds ─────────────────────────────────────── */ --bg-dark: #0D1210; /* page bg, dark sections */ --bg-dark-surface: #161A18; /* card bg on dark */ --bg-cream: #FAF7F0; /* page bg, light sections */ --bg-cream-deep: #F2EDE5; /* card bg on light */ /* ── COLOUR: Borders ─────────────────────────────────────────── */ --border-dark: #2A302D; /* borders on dark bg */ --border-cream: #DDD6C8; /* borders on light bg */ /* ── COLOUR: Text ────────────────────────────────────────────── */ --text-light: #EEF0EA; /* headings on dark bg */ --text-dark: #1A1815; /* headings on light bg */ --text-body-dark: #C8D0CC; /* body copy on dark bg */ --text-body-light: #5A564E; /* body copy on light bg */ --text-muted-dark: #A0ACA5; /* footnotes / footer on dark */ --text-muted-light: #3D3A35; /* NOTE: retire — use --text-body-light instead */ /* ── COLOUR: Copper palette ──────────────────────────────────── */ --copper: #C0825A; /* stat numbers, accents */ --copper-bright: #D4956A; /* labels on dark bg, pill text */ --copper-on-light: #A06A42; /* labels on light bg */ /* Copper alpha ramp — use for node fills, pill bg, diagram fills */ --copper-a04: rgba(160,106,66,.04); --copper-a06: rgba(160,106,66,.06); --copper-a08: rgba(160,106,66,.08); --copper-a10: rgba(160,106,66,.10); --copper-a12: rgba(160,106,66,.12); --copper-a14: rgba(160,106,66,.14); --copper-a16: rgba(160,106,66,.16); --copper-a18: rgba(160,106,66,.18); --copper-a22: rgba(160,106,66,.22); --copper-a26: rgba(160,106,66,.26); --copper-a28: rgba(160,106,66,.28); --copper-a30: rgba(160,106,66,.30); --copper-a36: rgba(160,106,66,.36); --copper-a40: rgba(160,106,66,.40); --copper-a55: rgba(160,106,66,.55); --copper-a65: rgba(160,106,66,.65); --copper-a70: rgba(160,106,66,.70); --copper-a80: rgba(160,106,66,.80); /* Copper-bright alpha — pills, glows */ --copper-bright-a06: rgba(192,130,90,.06); --copper-bright-a12: rgba(192,130,90,.12); --copper-bright-a14: rgba(192,130,90,.14); --copper-bright-a18: rgba(192,130,90,.18); --copper-bright-a25: rgba(192,130,90,.25); --copper-bright-a28: rgba(192,130,90,.28); --copper-bright-a55: rgba(192,130,90,.55); /* Copper-glow — pulse animations */ --copper-glow-a10: rgba(212,149,106,.10); --copper-glow-a28: rgba(212,149,106,.28); --copper-glow-a55: rgba(212,149,106,.55); /* Shadow base — warm brown, for box-shadow and drop-shadow */ --shadow-a10: rgba(120,70,30,.10); --shadow-a12: rgba(120,70,30,.12); --shadow-a13: rgba(120,70,30,.13); --shadow-a14: rgba(120,70,30,.14); --shadow-a18: rgba(120,70,30,.18); --shadow-a20: rgba(120,70,30,.20); --shadow-a26: rgba(120,70,30,.26); /* Dark bg alpha — nav backdrop, tooltips */ --dark-a94: rgba(13,18,16,.94); --dark-a96: rgba(13,18,16,.96); /* Axis / grid lines in SVG diagrams */ --axis-strong: rgba(26,24,21,.40); --axis-muted: rgba(26,24,21,.22); --axis-subtle: rgba(26,24,21,.45); /* Text alpha on light — SVG subtitle captions */ --text-body-light-a70: rgba(90,86,78,.70); /* Diagram cream overlay (lotus petals) */ --diagram-overlay: rgba(250,247,240,.60); /* White */ --white: #ffffff; /* ── TYPOGRAPHY ──────────────────────────────────────────────── */ --ff: 'Fira Sans', system-ui, sans-serif; /* Font sizes — named by role */ --fs-hero: clamp(2.6rem, 6vw, 3.8rem); --fs-hero-mobile: clamp(2rem, 8vw, 2.8rem); --fs-h1: 2.4rem; /* contact heading */ --fs-h2: 1.9rem; /* section titles */ --fs-h2-mobile: 1.6rem; --fs-h3: 1.3rem; /* case study card titles */ --fs-card-title: 1.1rem; /* process / about card titles */ --fs-body-lg: 1.08rem; /* section subtitles */ --fs-body: 1rem; /* about text paragraphs */ --fs-body-sm: .95rem; /* card body, depth phase body */ --fs-ui: .92rem; /* ai-card p, case item p */ --fs-label: .88rem; /* section-label, captions */ --fs-meta: .82rem; /* nav links, about-detail-label */ --fs-tag: .76rem; /* hero pills */ --fs-pill: .72rem; /* card nav pills, tooltips */ --fs-micro: .68rem; /* case meta tags */ --fs-stat: 1.8rem; /* case stat numbers */ --fs-stat-mobile: 1.5rem; --fs-stat-label: .72rem; --fs-counter: .78rem; /* card counter */ --fs-card-num: 2.8rem; /* large decorative numbers */ --fs-footer: .78rem; /* SVG only — diagram node text (px because SVG doesn't use rem) */ --fs-svg-title: 17px; /* primary node label */ --fs-svg-sub: 15px; /* secondary node label */ --fs-svg-caption: 14px; /* diagram subtitle / italic */ --fs-svg-micro: 12px; /* small italic labels */ --fs-svg-tag: 11px; /* ordinal numbers in nodes */ /* Font weights */ --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.1; --lh-heading: 1.15; --lh-card: 1.3; --lh-body: 1.7; --lh-body-lg: 1.75; --lh-loose: 1.8; /* Letter spacing */ --ls-tight: -.03em; --ls-snug: -.02em; --ls-normal: 0; --ls-wide: .02em; --ls-wider: .03em; --ls-widest: .06em; /* ── LAYOUT ──────────────────────────────────────────────────── */ --max-content: 1135px; --max-text: 600px; /* section subtitles */ --max-hero: 700px; /* hero h1 */ --max-about: 460px; /* about column */ --max-diagram: 900px; /* diagram SVG */ --max-diagram-lg: 1100px; /* wide process arc diagram */ --max-caption: 540px; /* diagram captions */ --max-divider: 740px; /* diagram bottom dividers */ --pad-page: 2.5rem; /* horizontal page padding */ --pad-page-sm: 1.5rem; /* mobile */ /* Section vertical padding */ --section-pad: 6rem 0; --section-pad-mobile: 4rem 0; --hero-pad: 11rem 2.5rem 7rem; --hero-pad-mobile: 7rem 1.5rem 4rem; --contact-pad: 7rem 2.5rem; --contact-pad-mobile: 4.5rem 1.5rem; --footer-pad: 1.8rem 2.5rem; /* Border radius */ --radius-sm: 4px; /* Transitions */ --transition-fast: .15s ease; --transition-base: .2s ease; --transition-slow: .3s ease; --transition-spring: .42s cubic-bezier(.34,1.46,.64,1); /* Error state */ --color-error: #E05050; /* White alpha */ --white-a85: rgba(255,255,255,.85); /* Copper glow zero (for animation keyframes) */ --copper-glow-a0: rgba(212,149,106,.0); /* Copper alpha extra stops */ --copper-a35: rgba(160,106,66,.35); /* AI bubble subtitle — muted text-body-dark with alpha */ --text-body-dark-a75: rgba(200,208,204,.75); /* Z-index */ --z-nav: 100; }