/* ============================================================================ Alpha Branding Studio — Design Tokens assets/css/tokens.css ---------------------------------------------------------------------------- Single source of truth for the theme's design decisions. Derived directly from DESIGN-SYSTEM.md v1.0, COMPONENT.md v1.0, WIREFRAMES.md v1.0. Contract: - Tokens only. No component styles, resets, or utility classes. - Every value below resolves through a CSS custom property — never hardcode these numbers in component CSS; reference the variable instead. - Enqueue this file FIRST, before component and block-editor styles, so the cascade is available everywhere (front end + Gutenberg). Language: monochrome by conviction. Ink + Paper do the work; Flare appears at ~5% (the 80/15/5 rule). Structure comes from borders before shadows. ============================================================================ */ :root { /* ========================================================================== 1. BRAND COLORS Raw palette. Prefer the semantic aliases (see 1b) inside components so a brand tweak happens in one place. ========================================================================== */ /* Neutrals ---------------------------------------------------------------- */ --color-ink: #0E0E0E; /* Near-black. Primary / logo / headings / footer */ --color-graphite: #3D3D3A; /* Warm dark gray. Body text, secondary emphasis */ --color-stone: #8A8880; /* Warm mid-gray. Muted text, captions, disabled */ --color-paper: #FAFAF7; /* Warm off-white. Page background */ --color-bone: #FFFFFF; /* Pure white. Raised surfaces (cards, inputs) */ --color-ash: #E6E4DE; /* Warm hairline. Default 1px borders */ /* Accent ------------------------------------------------------------------ */ --color-flare: #C8613C; /* Terracotta-amber. The single accent, used sparingly */ --color-ember: #A54B2C; /* Darker Flare. Hover/pressed + accent text on light */ --color-flare-wash: rgba(200, 97, 60, 0.08); /* Whisper tint. Selected rows/chips only */ /* Semantic (functional only — never used as brand colors) ----------------- */ --color-success: #3F7A57; /* Sage. Form success, positive deltas */ --color-warning: #B07B1E; /* Amber. Warnings (warm, aligns w/ Flare) */ --color-error: #B23B34; /* Clay. Errors, closed/unavailable */ /* ========================================================================== 1b. SEMANTIC COLOR ALIASES Reference THESE in components, not the raw palette above. ========================================================================== */ --text-primary: var(--color-ink); --text-secondary: var(--color-graphite); --text-muted: var(--color-stone); --text-on-dark: var(--color-paper); --text-accent: var(--color-ember); /* accent text on light bg (meets AA) */ --bg-page: var(--color-paper); --bg-surface: var(--color-bone); --bg-inverse: var(--color-ink); /* Ink bands, footer, dark CTA */ --border-default: var(--color-ash); --border-strong: var(--color-graphite); --accent: var(--color-flare); --accent-strong: var(--color-ember); --accent-wash: var(--color-flare-wash); /* ========================================================================== 2. TYPOGRAPHY ========================================================================== */ /* Font families (self-hosted; fall back to system) ------------------------ */ --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Font weights ------------------------------------------------------------ */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fluid font sizes (clamp: min, preferred, max) --------------------------- */ --fs-display: clamp(2.5rem, 1.40rem + 4.6vw, 4.75rem); /* Hero statement */ --fs-h1: clamp(2.125rem, 1.40rem + 3.0vw, 3.5rem); /* Page title */ --fs-h2: clamp(1.75rem, 1.30rem + 1.9vw, 2.5rem); /* Section title */ --fs-h3: clamp(1.375rem, 1.20rem + 0.8vw, 1.75rem); /* Subsection */ --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* Card/block title */ --fs-body-lg: 1.25rem; /* 20px — lead paragraph */ --fs-body: 1.0625rem; /* 17px — default copy */ --fs-body-sm: 0.9375rem; /* 15px — secondary copy */ --fs-caption: 0.8125rem; /* 13px — meta / helper */ --fs-eyebrow: 0.8125rem; /* 13px — section labels */ /* Line heights ------------------------------------------------------------ */ --lh-display: 1.02; /* Oversized display type */ --lh-tight: 1.06; /* Headings */ --lh-snug: 1.2; /* Compact headings/labels */ --lh-heading: 1.3; /* Small headings (h4) */ --lh-body: 1.65; /* Default reading copy */ /* Letter spacing ---------------------------------------------------------- */ --tracking-display: -0.03em; /* Display headline */ --tracking-tight: -0.025em; /* Headings */ --tracking-snug: -0.015em; /* h3 / h4 */ --tracking-normal: 0; /* Body */ --tracking-wide: 0.14em; /* Eyebrows (UPPERCASE) */ /* ========================================================================== 3. SPACING SCALE 4px base. Every margin, padding, and gap references this scale. ========================================================================== */ --space-1: 0.25rem; /* 4px — icon-to-label gaps */ --space-2: 0.5rem; /* 8px — tight internal padding */ --space-3: 0.75rem; /* 12px — chip / small button padding */ --space-4: 1rem; /* 16px — base unit, default gap */ --space-5: 1.5rem; /* 24px — card padding, form field gaps */ --space-6: 2rem; /* 32px — large card padding, block gaps*/ --space-7: 3rem; /* 48px — sub-section spacing */ --space-8: 4rem; /* 64px — section spacing (small) */ --space-9: 6rem; /* 96px — section spacing (default) */ --space-10: 8.75rem; /* 140px — section spacing (large) */ /* ========================================================================== 4. BORDER RADIUS Rounded but architectural — controls stay measured, surfaces get larger. ========================================================================== */ --radius-sm: 6px; /* Chips, tags, inputs, small buttons */ --radius-md: 10px; /* Buttons, form fields */ --radius-lg: 16px; /* Cards, image containers */ --radius-xl: 24px; /* Feature panels, modals */ --radius-pill: 999px; /* Pills, avatars, icon buttons */ /* ========================================================================== 5. SHADOWS Warm-tinted (Ink-based), subtle. Border first, shadow only on lift. ========================================================================== */ --shadow-xs: 0 1px 2px rgba(14, 14, 14, 0.04); /* Inputs, resting chips */ --shadow-sm: 0 2px 8px rgba(14, 14, 14, 0.05); /* Resting cards */ --shadow-md: 0 8px 24px rgba(14, 14, 14, 0.07); /* Hovered cards, dropdowns*/ --shadow-lg: 0 18px 48px rgba(14, 14, 14, 0.10); /* Modals, popovers */ --shadow-focus: 0 0 0 3px rgba(200, 97, 60, 0.28); /* Flare-tinted focus ring */ /* ========================================================================== 6. LAYOUT ========================================================================== */ /* Container widths -------------------------------------------------------- */ --container-max: 1240px; /* Standard content width */ --container-wide: 1440px; /* Full-bleed hero / galleries */ --container-narrow: 760px; /* Long-form reading (blog, case) */ /* Gutters & grid ---------------------------------------------------------- */ --gutter: clamp(1.25rem, 0.50rem + 3.0vw, 3rem); /* Page L/R padding */ --grid-gap: clamp(1rem, 0.60rem + 1.2vw, 1.5rem); /* Column gap */ --grid-columns: 12; /* Base grid columns */ /* Section spacing (vertical rhythm) --------------------------------------- */ --section-sm: clamp(3rem, 2.0rem + 4vw, 4rem); /* Tight related blocks */ --section-md: clamp(4rem, 2.5rem + 6vw, 6rem); /* Default */ --section-lg: clamp(5.5rem, 3.0rem + 9vw, 8.75rem); /* Major breaks */ --section-xl: clamp(7.5rem, 4.0rem + 12vw, 12.5rem); /* Statement / breather */ /* ========================================================================== 7. Z-INDEX SCALE Ordered layering. At most two floating layers on screen at once. ========================================================================== */ --z-base: 0; /* Default flow */ --z-raised: 10; /* Lifted cards, sticky sub-elements */ --z-dropdown: 100; /* Nav dropdowns, select menus */ --z-sticky: 200; /* Sticky header */ --z-overlay: 900; /* Scrim behind modal / mobile menu */ --z-modal: 1000; /* Modal / mobile menu / drawer */ --z-toast: 1100; /* Toast notifications (above modal) */ --z-spinner: 1200; /* Full-screen loading / top-most */ /* ========================================================================== 8. TRANSITION DURATIONS Motion is quick and mechanical — the shutter, not the bounce. ========================================================================== */ --dur-fast: 120ms; /* Hover color, small state changes */ --dur-base: 200ms; /* Buttons, inputs, most transitions */ --dur-slow: 320ms; /* Card lifts, dropdowns, modals */ --dur-reveal: 600ms; /* Scroll-in reveals */ /* ========================================================================== 9. EASING FUNCTIONS No spring / overshoot / bounce. ========================================================================== */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default UI transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Entrances, reveals */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exits */ /* ========================================================================== 10. ICON SIZES Lucide line icons. One stroke width site-wide. ========================================================================== */ --icon-sm: 18px; /* Inline (buttons, fields) */ --icon-md: 22px; /* Default UI / social */ --icon-lg: 28px; /* Feature / decorative */ --icon-stroke: 1.75; /* Single stroke width */ /* ========================================================================== 11. BREAKPOINTS Reference values for JS and container queries. NOTE: native @media rules cannot read custom properties — use these literal values there directly. ========================================================================== */ --bp-sm: 480px; /* Large phones */ --bp-md: 768px; /* Tablets */ --bp-lg: 1024px; /* Laptops (nav inline) */ --bp-xl: 1280px; /* Desktops */ --bp-2xl: 1536px; /* Large displays */ /* ========================================================================== 12. MISC TOKENS ========================================================================== */ /* Header heights ---------------------------------------------------------- */ --header-height: 80px; /* Desktop sticky header */ --header-height-mobile: 64px; /* Mobile header */ /* Border widths ----------------------------------------------------------- */ --border-hairline: 1px; /* Default borders, dividers */ --border-medium: 1.5px; /* Secondary button, input focus */ --border-thick: 2px; /* Active nav underline, featured */ /* Max text widths (reading measure) --------------------------------------- */ --measure: 68ch; /* Long-form body (optimal reading) */ --measure-narrow: 52ch; /* Lead paragraphs, hero copy */ --measure-wide: 80ch; /* Wider intros / captions */ }