/* ============================================================ Eagle Agency 2.0 — Design Tokens ------------------------------------------------------------ Single source of truth for color, type, space, radius, border, shadow, motion, breakpoints, containers and z-index. Both index.html and admin.html load this file. Nothing here is new brand color — every value below was already in use somewhere in the project; this file only centralizes it. Per Phase 02 §30: existing tokens were inspected and kept, not reinvented. --gold, --gold-soft, --black/--white and the two easing curves already existed identically in both the public site and the admin panel — proof the two already shared a language before this file existed. ============================================================ */ :root{ /* ---------- 01 color — primitives ---------- Raw values live only here. Everything else in the project should reference the semantic layer below, not these. */ --c-black: #0a0a0c; --c-black-soft: #131318; --c-black-elevated:#191920; --c-ivory: #f3f1ea; --c-ivory-dim: #c9c6bd; --c-gray-line: rgba(243,241,234,.11); --c-gray-line-2: rgba(243,241,234,.2); --c-gray-muted: #95908a; --c-gray-dim: #63605b; --c-gold: #c9a13b; --c-gold-soft: #e9cd8a; --c-cyan: #6fe3ff; /* cyber accent, used only on interactive glass surfaces */ --c-ok: #4ea172; --c-warn: #d5a03c; --c-danger: #d1615d; /* ---------- 01 color — semantic (use these) ---------- */ --color-bg: var(--c-black); --color-bg-soft: var(--c-black-soft); --color-surface: var(--c-black-soft); --color-surface-elevated:var(--c-black-elevated); --color-text: var(--c-ivory); --color-text-muted: var(--c-ivory-dim); --color-border: var(--c-gray-line); --color-border-strong: var(--c-gray-line-2); --color-gold: var(--c-gold); --color-gold-soft: var(--c-gold-soft); --color-accent: var(--c-cyan); /* admin + interactive glass only */ --color-success: var(--c-ok); --color-warning: var(--c-warn); --color-danger: var(--c-danger); /* Gold is deliberately not given a "use everywhere" role. It appears only via --color-gold on: primary CTA, active nav state, selected admin-action, and brand marks. Everything else reads in ivory, muted ivory, or the neutral scale. */ /* ---------- 02 typography ---------- One display family, one UI family — already true in the project (Fraunces + Inter). Noto Kufi Arabic is not a third brand family; it is the required RTL fallback and inherits the same role as Inter. */ --font-display: 'Fraunces', 'Noto Kufi Arabic', serif; --font-body: 'Inter', 'Noto Kufi Arabic', system-ui, sans-serif; --fs-display: clamp(2.6rem, 7vw, 6.5rem); --fs-h1: clamp(2.1rem, 5vw, 4rem); --fs-h2: clamp(1.7rem, 3.6vw, 2.8rem); --fs-h3: clamp(1.4rem, 2.6vw, 2rem); --fs-h4: clamp(1.1rem, 1.8vw, 1.4rem); --fs-body-lg: clamp(1.05rem, 1.4vw, 1.25rem); --fs-body: 1rem; --fs-body-sm: .875rem; --fs-caption: .75rem; --fs-label: .688rem; /* 11px — matches the existing uppercase label pattern */ --fs-nav: .688rem; --fs-button: .688rem; --lh-display: .95; --lh-heading: 1.15; --lh-body: 1.55; --ls-label: .13em; /* the existing uppercase tracking used across nav/labels */ /* ---------- 03 spacing ---------- 8px base scale. Existing hand-picked paddings (10px, 14px, 18px, 24px...) map onto this scale closely enough that migration is a rename, not a redesign. */ --sp-2xs: .25rem; /* 4px */ --sp-xs: .5rem; /* 8px */ --sp-sm: .75rem; /* 12px */ --sp-md: 1rem; /* 16px */ --sp-lg: 1.5rem; /* 24px */ --sp-xl: 2rem; /* 32px */ --sp-2xl: 3rem; /* 48px */ --sp-3xl: 4rem; /* 64px */ --sp-4xl: 6rem; /* 96px */ --sp-5xl: 8rem; /* 128px */ /* ---------- 04 grid / containers ---------- */ --container-sm: 640px; --container-md: 900px; --container-lg: 1160px; /* existing editorial max-width, kept */ --container-xl: 1440px; --grid-gutter: var(--sp-lg); /* ---------- 05 breakpoints ---------- 340 / 700 / 900 already existed as real, load-bearing breakpoints across the project. 520 and 640 folded in as intermediate steps rather than kept as one-off values. */ --bp-xs: 340px; --bp-sm: 520px; --bp-md: 700px; --bp-lg: 900px; --bp-xl: 1200px; /* ---------- 06 radius ---------- Public editorial surfaces stay closer to square; Admin surfaces get one step more rounding, per §6 of the brief. */ --radius-sm: 2px; /* inputs, chips on dense surfaces */ --radius-md: 4px; /* buttons, public cards */ --radius-lg: 6px; /* media frames, modals */ --radius-admin: 3px; /* admin default — already in use */ --radius-pill: 999px; /* used sparingly: filter chips only */ /* ---------- 07 borders ---------- */ --border-hairline: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); --border-gold: 1px solid var(--color-gold-soft); --border-accent: 1px solid rgba(111,227,255,.5); /* ---------- 08 shadow ---------- Depth comes mainly from contrast and layering (Phase 02 §8) — the shadow scale stays small on purpose. */ --shadow-sm: 0 1px 0 0 rgba(243,241,234,.12) inset; --shadow-md: 0 24px 56px -34px rgba(0,0,0,.95); --shadow-lg: 0 34px 70px -34px rgba(0,0,0,.95); --shadow-focus-gold: 0 0 0 3px rgba(233,205,138,.35); --shadow-focus-accent:0 0 0 3px rgba(111,227,255,.3); /* ---------- 09 motion ---------- Both curves already existed, doing exactly the roles the brief asks for: an "arrive" ease for reveals, and a fast-in "press" ease for tactile feedback. */ --ease-out: cubic-bezier(.2,.8,.2,1); /* reveals, hovers */ --ease-press: cubic-bezier(.6,0,.3,1); /* presses, snaps */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-cinematic: 620ms; /* hero-scale reveals only */ /* Admin motion is capped short on purpose — §21: admin must never feel cinematic at the expense of speed. */ --dur-admin-fast: 120ms; --dur-admin-base: 200ms; /* ---------- 10 z-index ---------- The project had 20+ raw z-index values scattered per component (0 through 210). This scale replaces that on migration; existing components keep working until moved over, since z-index only matters relative to siblings. */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* Reduced motion: collapse the cinematic durations, keep the rest — functionality and readability are never gated by motion preference (§23). */ @media (prefers-reduced-motion: reduce){ :root{ --dur-slow: var(--dur-fast); --dur-cinematic: var(--dur-fast); } }