/* * Peregrine 1031 — Design Tokens * * Single source of truth for colors, typography, spacing, and motion. * Consumed downstream by the WordPress block theme's theme.json and by * Claude `design` / `showcase` mockups in design/pages/. * * Hex values for the brand orange family are sampled directly from * peregrine-assets/LOGO.svg. The brand navy is a sampled approximation * from peregrine1031-assets/logo-peregrine-600.png — re-sample with a * precise picker before final theme build if exact-match is required. */ :root { /* ----------------------------------------------------------------- * BRAND COLORS * ----------------------------------------------------------------- */ --color-brand-orange: #F2612C; /* Primary brand orange — wordmark "1031 Energy Partners", flame body */ --color-brand-orange-dark: #F15A24; /* Gradient stop on flame — use for hover/active on orange */ --color-brand-orange-deep: #D9501F; /* Accessible pairing for orange-on-light text (AA at 14pt+) */ --color-brand-flame: #FF3300; /* High-saturation accent — reserved use, never a UI fill */ --color-brand-navy: #2A2B7C; /* Primary brand navy — wordmark "PEREGRINE" */ --color-brand-navy-deep: #1E1F5C; /* Darker navy — pressed states, hero overlays */ --color-brand-navy-soft: #3D3E94; /* Lighter navy — secondary surfaces */ /* ----------------------------------------------------------------- * EDITORIAL NEUTRALS * Warm-biased; never pure white or cool gray. Paper feel. * ----------------------------------------------------------------- */ --color-surface: #FAF7F2; /* Page background — warm off-white */ --color-surface-elevated: #FFFFFF; /* Cards, modals — pure white reserved for elevation */ --color-surface-sunken: #F2EEE5; /* Inset blocks, code/quote backgrounds */ --color-hairline: #E2DDD2; /* Warm hairline rules, dividers, borders */ --color-hairline-strong: #C9C2B3; /* Stronger borders, input outlines */ --color-ink: #0F0F12; /* Near-black with slight warm bias — headlines */ --color-text: #2A2A30; /* Body text */ --color-text-muted: #5A5A65; /* Secondary text, captions, meta */ --color-text-subtle: #8A8A95; /* Tertiary text, placeholder */ /* ----------------------------------------------------------------- * SEMANTIC COLORS * ----------------------------------------------------------------- */ --color-accent: var(--color-brand-orange); --color-accent-on-dark: var(--color-brand-orange); --color-link: var(--color-brand-navy); --color-link-hover: var(--color-brand-orange-deep); --color-focus-ring: var(--color-brand-orange); --color-success: #2F7D52; --color-warning: #B86E15; --color-danger: #B53A2A; --color-info: var(--color-brand-navy); /* ----------------------------------------------------------------- * TYPOGRAPHY * Source Serif 4 (headlines), Inter (body/UI), JetBrains Mono (tabular). * All three are free; Google Fonts or self-hosted. * ----------------------------------------------------------------- */ --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type scale — modular, 1.25 minor third on desktop, tightened on mobile */ --text-xs: 0.75rem; /* 12px — meta, captions */ --text-sm: 0.875rem; /* 14px — small UI */ --text-base: 1.0625rem; /* 17px — body (bumped from 16 for older mobile readers) */ --text-lg: 1.25rem; /* 20px — lead paragraphs, direct-answer blocks */ --text-xl: 1.5rem; /* 24px — h4 / card titles */ --text-2xl: 1.875rem; /* 30px — h3 */ --text-3xl: 2.375rem; /* 38px — h2 */ --text-4xl: 3rem; /* 48px — h1 (article) */ --text-5xl: 3.75rem; /* 60px — hero headline (desktop) */ --text-6xl: 4.75rem; /* 76px — oversize editorial display */ /* Line heights — generous for editorial body */ --leading-tight: 1.15; /* Display, hero */ --leading-snug: 1.25; /* Headings */ --leading-body: 1.65; /* Body — generous for 60yo mobile reader */ --leading-loose: 1.85; /* Long-form, blockquote */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.02em; /* Display headlines */ --tracking-normal: 0; --tracking-wide: 0.04em; /* All-caps eyebrow labels */ /* ----------------------------------------------------------------- * SPACING — 4px base, generous editorial rhythm * ----------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Section rhythm */ --section-y: var(--space-9); --section-y-tight: var(--space-7); /* ----------------------------------------------------------------- * LAYOUT * ----------------------------------------------------------------- */ --content-max: 68ch; /* Article body — readable measure */ --content-wide: 84rem; /* 1344px — full content container */ --content-narrow: 42rem; /* 672px — single-column intake form */ /* ----------------------------------------------------------------- * BORDERS & RADII * ----------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --border-thin: 1px solid var(--color-hairline); --border-strong: 1px solid var(--color-hairline-strong); /* ----------------------------------------------------------------- * ELEVATION * Restrained; editorial sites use shadow sparingly. * ----------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 15, 18, 0.04); --shadow-md: 0 4px 12px rgba(15, 15, 18, 0.06); --shadow-lg: 0 12px 32px rgba(15, 15, 18, 0.08); /* ----------------------------------------------------------------- * MOTION * Subtle; this is editorial, not interactive. * ----------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1); /* ----------------------------------------------------------------- * Z-INDEX * ----------------------------------------------------------------- */ --z-base: 0; --z-sticky: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 10000; } /* ------------------------------------------------------------------- * RESPONSIVE SPACING RAMP * The desktop scale above is the design's editorial rhythm — generous * by intent. On phones that same rhythm reads as dead space and forces * excessive scrolling, so we step DOWN only the large rungs of the * scale (and the section rhythm) at small/medium widths. Desktop * (>900px) is left completely untouched. Because every page consumes * these tokens, this single block tightens vertical cadence across all * 22 pages without any per-page edits. * ------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --space-9: 4.5rem; /* 96 → 72 */ --space-10: 5.5rem; /* 128 → 88 */ --section-y: 4.5rem; /* 96 → 72 */ --section-y-tight: 2.5rem; /* 48 → 40 */ } } @media (max-width: 640px) { :root { --space-7: 2.25rem; /* 48 → 36 */ --space-8: 2.75rem; /* 64 → 44 */ --space-9: 3.25rem; /* 96 → 52 */ --space-10: 4rem; /* 128 → 64 */ --section-y: 3.25rem; /* 96 → 52 */ --section-y-tight: 2rem; /* 48 → 32 */ } } /* ------------------------------------------------------------------- * REDUCED MOTION * Respect user preference. Editorial sites should be fine without animation. * ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ------------------------------------------------------------------- * DARK MODE — deliberately deferred from MVP. * Add a [data-theme="dark"] block here when commissioned. * Notes: surface inverts to a warm dark (#1A1815 family), ink/text invert * to a warm off-white (#F0EAE0 family), brand orange holds, navy lightens. * ------------------------------------------------------------------- */