/* ========================================================================== AXIS PREMIUM DESIGN SYSTEM — tokens.css (andrewforoklahoma.com) -------------------------------------------------------------------------- Fleet token structure, domain re-key. THE PRAIRIE CHAMBER — a dark-first slate room cut from the constitution theme (#30485f family): deep slate-blue surfaces, prairie-wheat signal (#c99a4b family), and a warm sand action ramp for the desk's secondary marks. Display face re-keyed to Cormorant Garamond (the site's live editorial serif) — Inter and IBM Plex Mono stay as the fleet's UI and mono pair. Type A publication: no lead-gen, no client-sale CTAs; attribution is the Andrew For Oklahoma research desk only. Default theme for this domain: dark. ========================================================================== */ :root { /* ======================================================================== 1. TYPE — families & tuned weights ======================================================================== */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Cormorant Garamond", "Cormorant Garamond Variable", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-display: 300; --display-opsz: 48; /* ======================================================================== 2. TYPE — scale ======================================================================== */ --title-1: 1.0625rem; --title-1-lh: 1.4; --title-1-ls: -.012em; --title-2: 1.25rem; --title-2-lh: 1.3; --title-2-ls: -.012em; --title-3: 1.5rem; --title-3-lh: 1.3; --title-3-ls: -.014em; --title-4: 1.875rem; --title-4-lh: 1.18; --title-4-ls: -.018em; --title-5: 2.25rem; --title-5-lh: 1.14; --title-5-ls: -.02em; --title-6: 2.625rem; --title-6-lh: 1.1; --title-6-ls: -.022em; --title-7: 3.125rem; --title-7-lh: 1.08; --title-7-ls: -.022em; --title-8: 3.625rem; --title-8-lh: 1.06; --title-8-ls: -.024em; --title-9: 4.25rem; --title-9-lh: 1.04; --title-9-ls: -.024em; --display-1: clamp(3.25rem, 7.2vw, 7.75rem); --display-1-lh: 0.98; --display-1-ls: -.028em; --display-2: clamp(2.5rem, 5vw, 5rem); --display-2-lh: 1.02; --display-2-ls: -.026em; --display-3: clamp(2rem, 3.6vw, 3.75rem); --display-3-lh: 1.06; --display-3-ls: -.024em; --text-micro: .6875rem; --text-mini: .8125rem; --text-small: .875rem; --text-regular: 1rem; --text-large: 1.125rem; --text-lede: clamp(1.125rem, 1.6vw, 1.375rem); --body-lh: 1.65; --label-ls: .08em; /* ======================================================================== 3. COLOR — dark theme "the prairie chamber" (DOMAIN THEME — slate #30485f) ======================================================================== */ --bg-canvas: #0e1620; --bg-0: #131e2a; --bg-1: #182636; --bg-2: #1e3042; --bg-3: #30485f; --text-1: #edf1f6; --text-2: #bcc7d3; --text-3: #8a99a8; --text-4: #63748a; --border-faint: rgba(188, 199, 211, .07); --border-thin: rgba(188, 199, 211, .12); --border-solid: rgba(188, 199, 211, .2); --border-strong: rgba(188, 199, 211, .32); --hairline: .5px; /* SIGNAL accent — prairie wheat, the chamber's warm rule */ --sig-200: #f0ddb4; --sig-300: #e6c98a; --sig-400: #d9b268; --sig-500: #c99a4b; --sig-600: #a87d3a; --sig-glow: rgba(201, 154, 75, .13); --sig-tint: rgba(201, 154, 75, .06); --sig-text: #e0c07c; /* ACTION ramp — warm sand (muted, never benchmark gold) */ --action-25: #1e1a12; --action-50: #2c251a; --action-100: #3d3322; --action-200: #5e4f33; --action-300: #7f6a44; --action-400: #9e8558; --action-500: #baa06a; --action-600: #d4b57f; --action-700: #e0c893; --action-800: #ecd9ac; --action-900: #f6e8c5; --action-975: #fbf3dd; --action: var(--action-600); --action-hover: var(--action-700); --action-tint: rgba(186, 160, 106, .08); --neutral-50: #eef2f8; --neutral-100: #e2e9f2; --neutral-200: #cfd9e8; --neutral-300: #b3c0d4; --neutral-400: #93a1b8; --neutral-500: #74839c; /* SEMANTIC CTA — wheat (dark text on wheat = the chamber's high-contrast mark) */ --cta-bg: #e0c07c; --cta-text: #0e1620; --cta-wipe: #ecd393; --cta-hover: #ecd393; --cta-secondary-bg: transparent; --cta-secondary-border: var(--border-solid); --cta-secondary-text: var(--text-1); --surface-1: var(--bg-1); --surface-2: var(--bg-2); --lift-1: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); --lift-2: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); --bevel: linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 60%); /* Wheat-tinted soft shadows (Stripe discipline: tinted, never black) */ --shadow-stack: 0 8px 2px 0 rgba(10, 16, 24, 0), 0 5px 2px 0 rgba(10, 16, 24, .16), 0 3px 2px 0 rgba(10, 16, 24, .28), 0 1px 1px 0 rgba(10, 16, 24, .4), 0 0 1px 0 rgba(10, 16, 24, .55); --shadow-tiny: 0 1px 4px -1px rgba(10, 16, 24, .5); --shadow-medium: 0 16px 32px rgba(10, 16, 24, .4); --shadow-high: 0 7px 32px rgba(10, 16, 24, .5); /* ======================================================================== 4. SPACING — fluid clamp scale ======================================================================== */ --space-micro: clamp(.5rem, .972vw, .875rem); --space-tiny: clamp(1rem, 1.389vw, 1.25rem); --space-small: clamp(1.5rem, 2.083vw, 1.875rem); --space-medium: clamp(2rem, 2.778vw, 2.5rem); --space-large: clamp(3.25rem, 5.556vw, 5rem); --space-big: clamp(5rem, 10.417vw, 9.375rem); --space-huge: clamp(6.25rem, 13.889vw, 12.5rem); --space-enormous: clamp(8.75rem, 17.361vw, 15.625rem); /* ======================================================================== 5. MOTION — token library ======================================================================== */ --ease-settle: cubic-bezier(.25, 1, .5, 1); --ease-rise: cubic-bezier(.32, .72, 0, 1); --ease-slip: cubic-bezier(.23, 1, .32, 1); --ease-leave: cubic-bezier(.4, 0, .2, 1); --speed-quick: .1s; --speed-fast: .2s; --speed-regular: .25s; --speed-slow: .45s; --speed-counter: 1.2s; --reveal-blur: 10px; --reveal-distance: 20%; --reveal-guard: 30px; --stagger-1: 40ms; --stagger-2: 70ms; --stagger-3: 120ms; --marquee-duration: 30s; /* ======================================================================== 6. GEOMETRY ======================================================================== */ --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-24: 24px; --radius-32: 32px; --radius-pill: 9999px; --radius-circle: 50%; --pill-sm: 32px; --pill-md: 44px; --pill-lg: 56px; --content-max: 1344px; --page-pad-x: clamp(1.25rem, 4vw, 3rem); --page-pad-y: var(--space-large); --header-height: 64px; --header-blur: 20px; --grid-cols: 12; --grid-gap: clamp(1rem, 2vw, 2rem); --section-y: var(--space-big); --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--sig-500); --edge-lamp: rgba(201, 154, 75, .1); --rail-width: 2px; } /* ========================================================================== 7. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); font-size: var(--text-regular); font-weight: var(--w-regular); line-height: var(--body-lh); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--sig-500); color: #0e1620; } .display { font-family: var(--font-display); font-weight: var(--w-display); font-variation-settings: "opsz" var(--display-opsz); } .label { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--w-regular); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--text-4); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-6); }