/* ════════════════════════════════════════════════════════════════════ TOKENS.CSS — BrandFirst Design System Single source of truth for all design values. ════════════════════════════════════════════════════════════════════ */ @layer tokens, reset, global, layouts, components, utilities, gsap; /* ════════════════════════════════════════════════════════════════════ @FONT-FACE Variable fonts — single file per family, weight range via font-weight. ════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; font-style: normal; } @font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; font-style: normal; } /* Breakpoints (reference only — can't use custom properties in media queries) --bp-sm: 30em 480px large phones --bp-md: 48em 768px tablets, layout shifts --bp-lg: 64em 1024px desktop layouts --bp-xl: 90em 1440px full desktop --bp-xxl: 120em 1920px large screens ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ ROOT TOKENS ════════════════════════════════════════════════════════════════════ */ @layer tokens { :root { /* ─────────────────────────────────────────────────────────────────── §1 COLOR PALETTE ───────────────────────────────────────────────────────────────── */ /* ── Primary · #1A3F6F · Deep Navy · hue 256 ────────── */ --primary: oklch(36.8% 0.093 256); --primary-ultra-dark: oklch(17% 0.037 256); --primary-dark: oklch(22% 0.060 256); --primary-semi-dark: oklch(27% 0.079 256); --primary-semi-light: oklch(52% 0.072 256); --primary-light: oklch(65% 0.052 256); --primary-ultra-light: oklch(95% 0.012 256); --primary-hover: oklch(43% 0.098 256); --primary-active: oklch(30% 0.098 256); /* ── Secondary · #C8511B · Burnt Orange · hue 41 ────── */ --secondary: oklch(58.4% 0.164 41); --secondary-ultra-dark: oklch(30% 0.085 41); --secondary-dark: oklch(40% 0.120 41); --secondary-semi-dark: oklch(48% 0.145 41); --secondary-semi-light: oklch(72% 0.105 41); --secondary-light: oklch(82% 0.068 41); --secondary-ultra-light: oklch(96% 0.018 41); --secondary-hover: oklch(65% 0.155 41); --secondary-active: oklch(50% 0.160 41); /* ── Neutrals · hue 256 · Navy-tinted warmth ─────────── */ --white: oklch(100% 0 0); --off-white: oklch(96.2% 0.006 85); --neutral-ultra-light: oklch(94% 0.005 256); --neutral-light: oklch(88% 0.007 256); --neutral-semi-light: oklch(78% 0.008 256); --neutral-semi-dark: oklch(50% 0.010 256); --neutral-dark: oklch(30% 0.010 256); --neutral-ultra-dark: oklch(20% 0.010 256); --black: oklch(14% 0.010 256); /* ─────────────────────────────────────────────────────────────────── §2 SEMANTIC TOKENS ───────────────────────────────────────────────────────────────── */ /* ── Text ── */ --text-main: var(--black); --text-heading: var(--black); --text-body: var(--neutral-dark); --text-muted: oklch(42% 0.008 256); --text-subtle: oklch(56% 0.006 256); --text-on-primary: var(--white); --text-on-secondary: var(--white); --text-on-dark: var(--white); --text-on-light: var(--black); --text-link: var(--primary); --text-link-hover: var(--primary-hover); --text-link-visited: var(--primary-semi-dark); --text-accent: var(--secondary); /* ── Component accent ── */ --icon-color: var(--primary); --icon-color-muted: var(--text-muted); --card-accent: var(--primary); --card-accent-strip: 3px solid var(--secondary); /* ── Brand gradient ── */ --brand-gradient: linear-gradient(to right, var(--primary) 0%, var(--primary) 60%, var(--secondary) 100%); --brand-gradient-dark: linear-gradient(to right, var(--primary-dark) 0%, var(--primary-dark) 60%, var(--secondary-dark) 100%); --brand-gradient-vertical:linear-gradient(to bottom, var(--primary) 0%, var(--primary) 60%, var(--secondary) 100%); --card-gradient-strip-height: 5px; /* ── Surfaces ── */ --surface-page: var(--off-white); --body-bg: var(--off-white); --surface-raised: var(--white); --surface-sunken: var(--neutral-ultra-light); --surface-tinted: oklch(96% 0.015 256); --surface-primary: var(--primary); --surface-secondary: var(--secondary); --surface-dark: var(--black); --surface-highlight: var(--primary-ultra-light); /* ── Borders ── */ --border-subtle: var(--neutral-ultra-light); --border-muted: oklch(91% 0.006 256); --border-default: var(--neutral-light); --border-strong: var(--neutral-semi-light); --border-focus: var(--primary); --border-accent: var(--primary-semi-light); --border-secondary: oklch(80% 0.045 41); /* ── Glass overlays ── */ --overlay-glass-subtle: oklch(100% 0 0 / 10%); --overlay-glass-medium: oklch(100% 0 0 / 15%); --overlay-glass-strong: oklch(100% 0 0 / 25%); --text-on-dark-muted: oklch(100% 0 0 / 85%); --text-on-dark-secondary: oklch(100% 0 0 / 80%); --text-on-dark-tertiary: oklch(100% 0 0 / 67%); --text-on-dark-subtle: oklch(100% 0 0 / 55%); /* ── Feedback ── */ --feedback-success: oklch(44% 0.155 150); --feedback-success-light: oklch(94% 0.032 150); --feedback-success-dark: oklch(28% 0.120 150); --feedback-warning: oklch(46% 0.135 72); --feedback-warning-light: oklch(95% 0.032 72); --feedback-warning-dark: oklch(30% 0.100 72); --feedback-error: oklch(46% 0.175 25); --feedback-error-light: oklch(94% 0.032 25); --feedback-error-dark: oklch(28% 0.140 25); --feedback-info: oklch(44% 0.075 256); --feedback-info-light: oklch(94% 0.015 256); --feedback-info-dark: oklch(28% 0.055 256); /* ─────────────────────────────────────────────────────────────────── §3 OVERLAYS ───────────────────────────────────────────────────────────────── */ --overlay-heavy: oklch(14% 0.010 256 / 80%); --overlay-dark: oklch(14% 0.010 256 / 65%); --overlay-medium: oklch(14% 0.010 256 / 45%); --overlay-light: oklch(14% 0.010 256 / 20%); --overlay-primary: oklch(36.8% 0.093 256 / 72%); --overlay-primary-soft: oklch(36.8% 0.093 256 / 20%); --backdrop-blur: blur(12px); --backdrop-blur-heavy: blur(24px); --opacity-disabled: 0.45; --opacity-dim: 0.35; --opacity-muted: 0.55; --opacity-moderate: 0.6; --opacity-subdued: 0.7; --opacity-strong: 0.88; --opacity-overlay-subtle: 0.15; --opacity-overlay-light: 0.22; --opacity-icon-muted: 0.8; /* ── Icon sizes — optically tuned to cap-height of surrounding text ── Rule: icon = text-size × 1.1 (sits at cap-height, not em-square). Never size icons to font-size directly — they will read too large. */ --icon-inline-xs: 0.75rem; --icon-inline-s: 0.875rem; --icon-inline-m: 1rem; --icon-inline-l: 1.125rem; --icon-inline-xl: 1.25rem; /* Standalone UI icons — fluid, scale with viewport */ --icon-ui-s: clamp(1.25rem, 1.139rem + 0.51vw, 1.5rem); --icon-ui-m: clamp(1.5rem, 1.278rem + 1.02vw, 2rem); --icon-ui-l: clamp(1.75rem, 1.417rem + 1.54vw, 2.5rem); --icon-ui-xl: clamp(2rem, 1.556rem + 2.04vw, 3rem); --icon-ui-2xl: clamp(2.5rem, 1.833rem + 3.06vw, 4rem); /* ── Icon chip framework ── */ --icon-chip-ratio: 2.2; --icon-chip-size-s: 1rem; --icon-chip-size-m: 1.25rem; --icon-chip-size-l: 1.5rem; --icon-chip-radius: var(--radius-s); --icon-stroke: var(--icon-stroke-default); /* ── Accessibility: minimum tap target ── */ --tap-target-min: 2.75rem; /* ── Icon stroke weights ── */ --icon-stroke-fine: 1.5; --icon-stroke-default: 2; --icon-stroke-strong: 2.5; --opacity-blob: 0.4; --opacity-grain: 0.06; --opacity-texture: 0.1; /* ─────────────────────────────────────────────────────────────────── §4 TYPOGRAPHY Fluid clamp: 360px → 1440px Slope = (desktop - mobile) / 1080 Intercept = mobile - (slope × 360) → rem ───────────────────────────────────────────────────────────────── */ /* ── Font families ── */ --font-heading: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', 'Courier', monospace; --font-size-base: 1rem; /* ── Fixed sizes ── */ --text-2xs: 0.625rem; --text-xs: 0.8125rem; /* ── Fluid body text ── s: 14px → 15px slope=1/1080=0.0009 intercept=14-0.333=13.667px=0.854rem m: 16px — fixed, no clamp l: 17px → 18px slope=1/1080=0.0009 intercept=17-0.333=16.667px=1.042rem xl: 18px → 20px slope=2/1080=0.0019 intercept=18-0.667=17.333px=1.083rem */ --text-s: clamp(0.875rem, 0.854rem + 0.09vw, 0.9375rem); --text-m: 1rem; --text-l: clamp(1.0625rem, 1.042rem + 0.09vw, 1.125rem); --text-xl: clamp(1.125rem, 1.083rem + 0.19vw, 1.25rem); /* ── Fluid headings ── xs: 18px → 20px slope=2/1080=0.0019 intercept=17.333=1.083rem s: 20px → 24px slope=4/1080=0.0037 intercept=18.667=1.167rem m: 24px → 32px slope=8/1080=0.0074 intercept=21.333=1.333rem l: 28px → 42px slope=14/1080=0.013 intercept=23.333=1.458rem xl: 32px → 56px slope=24/1080=0.0222 intercept=24=1.5rem 2xl: 40px → 72px slope=32/1080=0.0296 intercept=29.333=1.833rem display: 48px → 96px slope=48/1080=0.0444 intercept=32=2rem */ --heading-xs: clamp(1.125rem, 1.083rem + 0.19vw, 1.25rem); --heading-s: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem); --heading-m: clamp(1.5rem, 1.333rem + 0.74vw, 2rem); --heading-l: clamp(1.75rem, 1.458rem + 1.30vw, 2.625rem); --heading-xl: clamp(2rem, 1.5rem + 2.22vw, 3.5rem); --heading-2xl: clamp(2.5rem, 1.833rem + 2.96vw, 4.5rem); --heading-display: clamp(3rem, 2rem + 4.44vw, 6rem); --heading-hero: clamp(3rem, 1.292rem + 7.59vw, 8.125rem); --heading-hero-expanded: clamp(2.5rem, 0rem + 11.5vw, 11rem); /* ── Semantic roles ── */ --text-overline: 0.625rem; --text-label: var(--text-xs); --text-data: var(--text-l); --text-data-large: var(--heading-m); --text-data-unit: var(--text-s); /* ── Leading ── */ --leading-none: 1; --leading-crushed: 0.9; --leading-display: 1.05; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.65; --leading-loose: 1.8; /* ── Weight ── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Tracking ── */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-snug: 0.02em; --tracking-wide: 0.025em; --tracking-subtle: 0.05em; --tracking-label: 0.06em; --tracking-caps: 0.08em; --tracking-wide-caps: 0.1em; --tracking-overline: 0.15em; --tracking-display: 0.22em; /* ─────────────────────────────────────────────────────────────────── §5 SPACING · Fluid clamp (360px → 1440px) Slope = (desktop - mobile) / 1080 Intercept = mobile - (slope × 360) → rem ───────────────────────────────────────────────────────────────── */ /* 3xs: 4px → 8px slope=4/1080=0.0037 intercept=4-1.333=2.667=0.167rem */ --space-3xs: clamp(0.25rem, 0.167rem + 0.37vw, 0.5rem); /* 2xs: 8px → 12px slope=4/1080=0.0037 intercept=8-1.333=6.667=0.417rem */ --space-2xs: clamp(0.5rem, 0.417rem + 0.37vw, 0.75rem); /* xs: 12px → 20px slope=8/1080=0.0074 intercept=12-2.667=9.333=0.583rem */ --space-xs: clamp(0.75rem, 0.583rem + 0.74vw, 1.25rem); /* s: 16px → 24px slope=8/1080=0.0074 intercept=16-2.667=13.333=0.833rem */ --space-s: clamp(1rem, 0.833rem + 0.74vw, 1.5rem); /* m: 24px → 36px slope=12/1080=0.0111 intercept=24-4=20=1.25rem */ --space-m: clamp(1.5rem, 1.25rem + 1.11vw, 2.25rem); /* l: 32px → 48px slope=16/1080=0.0148 intercept=32-5.333=26.667=1.667rem */ --space-l: clamp(2rem, 1.667rem + 1.48vw, 3rem); /* xl: 48px → 72px slope=24/1080=0.0222 intercept=48-8=40=2.5rem */ --space-xl: clamp(3rem, 2.5rem + 2.22vw, 4.5rem); /* 2xl: 64px → 96px slope=32/1080=0.0296 intercept=64-10.667=53.333=3.333rem */ --space-2xl: clamp(4rem, 3.333rem + 2.96vw, 6rem); /* 3xl: 80px → 128px slope=48/1080=0.0444 intercept=80-16=64=4rem */ --space-3xl: clamp(5rem, 4rem + 4.44vw, 8rem); /* ─────────────────────────────────────────────────────────────────── §6 SECTION SPACING ───────────────────────────────────────────────────────────────── */ /* s: 48px → 72px = --space-xl */ --section-space-s: var(--space-xl); /* m: 64px → 96px = --space-2xl */ --section-space-m: var(--space-2xl); /* l: 80px → 128px = --space-3xl */ --section-space-l: var(--space-3xl); --gutter: clamp(1rem, 0.571rem + 1.34vw, 2.5rem); /* ─────────────────────────────────────────────────────────────────── §7 LAYOUT ───────────────────────────────────────────────────────────────── */ --content-width: 90rem; --content-width-narrow: 52rem; --content-width-wide: 100rem; --content-width-letter: clamp(20rem, 17.083rem + 12.96vw, 28.75rem); --content-full: 100%; /* ── Text width — max line length for readable text blocks ── */ --text-width-xs: 40ch; --text-width-s: 52ch; --text-width-m: 65ch; --text-width-l: 72ch; /* ─────────────────────────────────────────────────────────────────── §8 CONTEXTUAL GAPS ───────────────────────────────────────────────────────────────── */ --container-gap: var(--space-l); --content-gap: var(--space-m); --content-gap-wide: var(--space-l); --grid-gap: var(--space-m); --flow-space: var(--space-m); --card-gap: var(--space-s); --stack-gap: var(--space-xs); --cluster-gap: var(--space-2xs); /* ── Hover lift ── */ --hover-lift: calc(var(--space-3xs) * -1); --hover-lift-strong: calc(var(--space-2xs) * -1); --header-height: 3.75rem; --header-padding-block: var(--space-s); --footer-padding-block: var(--section-space-m); --sidebar-width: 18rem; --sidebar-width-compact: 4.5rem; /* ─────────────────────────────────────────────────────────────────── §9 BUTTONS ───────────────────────────────────────────────────────────────── */ --btn-padding-block: 0.75em; --btn-padding-inline: 1.5em; --btn-font-size: var(--text-m); --btn-font-weight: var(--weight-semibold); --btn-line-height: var(--leading-none); --btn-radius: var(--radius-m); --btn-icon-gap: 0.5em; --btn-transition: var(--duration-normal) var(--ease-default); --btn-min-inline-size: 2.75rem; --btn-focus-ring: var(--focus-ring); --btn-focus-offset: var(--focus-ring-offset); --btn-s-padding-block: 0.5em; --btn-s-padding-inline: 1.125em; --btn-s-font-size: var(--text-s); --btn-l-padding-block: 0.875em; --btn-l-padding-inline: 1.75em; --btn-l-font-size: var(--text-l); --btn-primary-bg: var(--primary); --btn-primary-text: var(--text-on-primary); --btn-primary-bg-hover: var(--primary-hover); --btn-primary-bg-active: var(--primary-active); --btn-primary-shadow: var(--shadow-primary); --btn-secondary-bg: var(--secondary); --btn-secondary-text: var(--text-on-secondary); --btn-secondary-bg-hover: var(--secondary-hover); --btn-secondary-bg-active:var(--secondary-active); --btn-outline-border: var(--primary); --btn-outline-text: var(--primary); --btn-outline-bg-hover: var(--primary); --btn-outline-text-hover: var(--text-on-primary); --btn-ghost-text: var(--primary); --btn-ghost-bg-hover: color-mix(in oklch, var(--primary) 8%, transparent); --btn-ghost-light-text: var(--white); --btn-ghost-light-bg-hover: color-mix(in oklch, var(--white) 14%, transparent); --btn-danger-bg: var(--feedback-error); --btn-danger-text: var(--white); --btn-danger-bg-hover: var(--feedback-error-dark); --btn-danger-bg-active: oklch(from var(--feedback-error-dark) calc(l - 0.06) c h); --btn-neutral-light-bg: var(--white); --btn-neutral-light-text: var(--text-main); --btn-neutral-light-bg-hover: var(--neutral-ultra-light); --btn-neutral-dark-bg: var(--black); --btn-neutral-dark-text: var(--text-on-dark); --btn-neutral-dark-bg-hover: var(--neutral-ultra-dark); /* ─────────────────────────────────────────────────────────────────── §10 CARDS ───────────────────────────────────────────────────────────────── */ --card-padding: var(--space-m); --card-padding-compact: var(--space-s); --card-padding-spacious: var(--space-l); --card-gap: var(--space-m); --card-gap-header: var(--space-xs); --card-gap-meta: var(--space-2xs); --card-bg: var(--surface-raised); --card-border: 1px solid var(--border-subtle); --card-radius: var(--radius-m); --card-min-radius: var(--radius-xs); --card-shadow: var(--shadow-s); --card-shadow-hover: var(--shadow-m); --card-transition: var(--duration-normal) var(--ease-default); --card-title-size: var(--text-l); --card-text-size: var(--text-m); --card-heading-color: var(--text-main); --card-text-color: var(--text-body); --card-meta-color: var(--text-muted); --card-eyebrow-color: var(--text-muted); --card-link-color: var(--text-link); --card-link-color-hover: var(--text-link-hover); --card-media-aspect-ratio: var(--ratio-card); --card-icon-size: var(--space-2xl); --card-media-radius: max(var(--card-min-radius), calc(var(--card-radius) - var(--card-padding) / 2)); --card-gradient-primary: linear-gradient(135deg, var(--primary-dark) 20%, var(--primary-ultra-dark) 80%); --card-gradient-secondary: linear-gradient(135deg, var(--secondary-dark) 20%, var(--secondary-ultra-dark) 80%); --card-gradient-surface: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-tinted) 100%); --slide-ratio-square: 1 / 1; --slide-ratio-portrait: 3 / 4; --slide-ratio-landscape: 16 / 9; --slide-ratio-wide: 3 / 2; --slide-ratio-feature: 4 / 3; --slide-min-s: 16rem; --slide-min-m: 20rem; --slide-min-l: 24rem; --slide-min-xl: 28rem; --slide-max-s: 24rem; --slide-max-m: 28rem; --slide-max-l: 32rem; --slide-max-xl: 40rem; /* ─────────────────────────────────────────────────────────────────── §11 FORMS ───────────────────────────────────────────────────────────────── */ --input-padding-block: 0.625em; --input-padding-inline: 0.75em; --input-font-size: var(--text-m); --input-line-height: var(--leading-normal); --input-bg: var(--surface-sunken); --input-bg-hover: var(--surface-tinted); --input-border: 1px solid var(--border-default); --input-border-hover: 1px solid var(--border-strong); --input-border-focus: 2px solid var(--border-focus); --input-border-error: 2px solid var(--feedback-error); --input-border-success: 2px solid var(--feedback-success); --input-radius: var(--radius-s); --input-placeholder: var(--text-subtle); --input-transition: var(--duration-fast) var(--ease-default); --input-min-height: 2.75rem; --label-font-size: var(--text-label); --label-font-weight: var(--weight-semibold); --label-tracking: var(--tracking-caps); --label-text-transform: uppercase; --label-color: var(--text-muted); --label-gap: var(--space-2xs); --form-group-gap: var(--space-m); --form-section-gap: var(--space-xl); /* ─────────────────────────────────────────────────────────────────── §12 GRIDS ───────────────────────────────────────────────────────────────── */ --grid-1: 1fr; --grid-2: repeat(2, 1fr); --grid-3: repeat(3, 1fr); --grid-4: repeat(4, 1fr); --grid-5: repeat(5, 1fr); --grid-6: repeat(6, 1fr); --grid-sidebar-left: var(--sidebar-width) 1fr; --grid-sidebar-right: 1fr var(--sidebar-width); --grid-golden: 1fr 1.618fr; --grid-golden-reverse: 1.618fr 1fr; --grid-wide-narrow: 2fr 1fr; --grid-narrow-wide: 1fr 2fr; --auto-grid-xs: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); --auto-grid-s: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); --auto-grid-m: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); --auto-grid-l: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); --auto-grid-xl: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); /* ─────────────────────────────────────────────────────────────────── §13 BORDER RADII ───────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 0.125rem; --radius-s: 0.25rem; --radius-m: 0.5rem; --radius-l: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --radius-round: 50%; /* ─────────────────────────────────────────────────────────────────── §14 SHADOWS Brand-tinted via primary hue 256. ───────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px oklch(14% 0.010 256 / 6%); --shadow-s: 0 2px 4px oklch(14% 0.010 256 / 6%), 0 1px 2px oklch(14% 0.010 256 / 4%); --shadow-m: 0 4px 12px oklch(14% 0.010 256 / 8%), 0 2px 4px oklch(14% 0.010 256 / 4%); --shadow-l: 0 8px 24px oklch(14% 0.010 256 / 10%), 0 2px 8px oklch(14% 0.010 256 / 4%); --shadow-xl: 0 16px 48px oklch(14% 0.010 256 / 12%), 0 4px 16px oklch(14% 0.010 256 / 5%); --shadow-primary: 0 4px 20px color-mix(in oklch, var(--primary) 28%, transparent); --shadow-primary-lg: 0 8px 32px color-mix(in oklch, var(--primary) 22%, transparent); --shadow-inner: inset 0 2px 4px oklch(14% 0.010 256 / 6%); /* ─────────────────────────────────────────────────────────────────── §15 TRANSITIONS · EASING ───────────────────────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.25, 0.10, 0.25, 1.00); --ease-in: cubic-bezier(0.55, 0.00, 1.00, 0.45); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-in-out: cubic-bezier(0.45, 0.00, 0.55, 1.00); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; --duration-slower: 800ms; --duration-page: 350ms; /* ─────────────────────────────────────────────────────────────────── §16 Z-INDEX ───────────────────────────────────────────────────────────────── */ --z-behind: -1; --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; /* ─────────────────────────────────────────────────────────────────── §17 FOCUS ───────────────────────────────────────────────────────────────── */ --focus-ring: 2px solid var(--primary); --focus-ring-offset: 2px; --focus-ring-inset: inset 0 0 0 2px var(--primary); --underline-offset-s: 0.15em; --underline-offset-m: 0.25em; --underline-offset-l: 0.35em; /* ─────────────────────────────────────────────────────────────────── §18 ASPECT RATIOS ───────────────────────────────────────────────────────────────── */ --ratio-square: 1 / 1; --ratio-landscape: 16 / 9; --ratio-portrait: 3 / 4; --ratio-card: 4 / 3; --ratio-wide: 21 / 9; --ratio-golden: 1.618 / 1; /* ─────────────────────────────────────────────────────────────────── §19 COMPONENT TOKENS ───────────────────────────────────────────────────────────────── */ /* ── Badges ── */ --badge-padding-block: 0.2em; --badge-padding-inline: 0.5em; --badge-font-size: var(--text-xs); --badge-font-weight: var(--weight-semibold); --badge-radius: var(--radius-full); --badge-gap: var(--space-2xs); --badge-primary-bg: var(--primary-ultra-light); --badge-primary-text: var(--primary-semi-dark); --tag-padding-block: var(--space-xs); --tag-padding-inline: var(--space-s); --tag-radius: var(--radius-s); --tag-font-size: var(--text-2xs); --tag-font-weight: var(--weight-semibold); --badge-success-bg: var(--feedback-success-light); --badge-success-text: var(--feedback-success); --badge-warning-bg: var(--feedback-warning-light); --badge-warning-text: var(--feedback-warning); --badge-error-bg: var(--feedback-error-light); --badge-error-text: var(--feedback-error); --badge-neutral-bg: var(--neutral-ultra-light); --badge-neutral-text: var(--text-muted); /* ── Tables ── */ --table-header-bg: var(--surface-tinted); --table-header-text: var(--text-muted); --table-header-font-size: var(--text-label); --table-header-tracking: var(--tracking-caps); --table-header-weight: var(--weight-semibold); --table-header-transform: uppercase; --table-row-height: clamp(2.75rem, 2.694rem + 0.19vw, 3rem); --table-row-stripe-bg: var(--surface-tinted); --table-border: 1px solid var(--border-subtle); --table-border-strong: 1px solid var(--border-default); --table-padding-block: var(--space-xs); --table-padding-inline: var(--space-m); --table-radius: var(--radius-m); --table-data-font: var(--font-mono); /* ── Dividers ── */ --divider: 1px solid var(--border-subtle); --divider-strong: 1px solid var(--border-default); --divider-accent: 2px solid var(--secondary); /* ── Tooltips ── */ --tooltip-bg: var(--neutral-ultra-dark); --tooltip-text: var(--white); --tooltip-font-size: var(--text-xs); --tooltip-padding-block: var(--space-2xs); --tooltip-padding-inline: var(--space-xs); --tooltip-radius: var(--radius-s); --tooltip-max-width: 16rem; --tooltip-shadow: var(--shadow-m); /* ── Progress ── */ --progress-height: 0.5rem; --progress-height-thin: 0.25rem; --progress-radius: var(--radius-full); --progress-track-bg: var(--neutral-ultra-light); --progress-fill: var(--primary); --progress-fill-success: var(--feedback-success); --progress-fill-warning: var(--feedback-warning); --progress-fill-error: var(--feedback-error); /* ── Avatars ── */ --avatar-xs: 1.5rem; --avatar-s: 2rem; --avatar-m: 2.5rem; --avatar-l: 3rem; --avatar-xl: 4rem; --avatar-radius: var(--radius-round); --avatar-bg: var(--primary-ultra-light); --avatar-text: var(--primary-semi-dark); /* ── Navigation ── */ --nav-item-padding-block: var(--space-xs); --nav-item-padding-inline: var(--space-m); --nav-item-radius: var(--radius-s); --nav-item-active-bg: var(--surface-tinted); --nav-item-active-text: var(--primary); --nav-item-active-border: 2px solid var(--primary); --nav-item-hover-bg: color-mix(in oklch, var(--primary) 6%, transparent); /* ── Modals ── */ --modal-bg: var(--white); --modal-radius: var(--radius-l); --modal-shadow: var(--shadow-xl); --modal-padding: var(--space-xl); --modal-max-width-s: 28rem; --modal-max-width-m: 42rem; --modal-max-width-l: 60rem; /* ── Tabs ── */ --tab-padding-block: var(--space-xs); --tab-padding-inline: var(--space-m); --tab-active-text: var(--primary); --tab-active-border: 2px solid var(--primary); --tab-inactive-text: var(--text-muted); --tab-hover-text: var(--primary-hover); --tab-transition: var(--duration-fast) var(--ease-default); /* ── Skip link ── */ --skip-link-bg: var(--primary); --skip-link-text: var(--white); --skip-link-padding: var(--space-s) var(--space-m); /* ── Line weights ── */ --line-hairline: 0.5px; --line-thin: 1px; --line-default: 1.5px; --line-medium: 2px; --line-thick: 3px; --line-heavy: 4px; /* ─────────────────────────────────────────────────────────────────── §20 GSAP / ANIMATION TOKENS CSS-side references that match what GSAP JS will animate. ───────────────────────────────────────────────────────────────── */ /* ── Easing ── */ --ease-gsap-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-gsap-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Scroll reveal ── */ --duration-reveal: 0.8s; --distance-reveal: 40px; --stagger-reveal: 0.1s; /* ── Hero / SplitText ── */ --duration-hero: 1.2s; --distance-hero: 60px; --stagger-char: 0.02s; --stagger-word: 0.05s; --stagger-line: 0.1s; /* ── Video expand on scroll ── */ --video-scale-start: 0.6; --video-radius-start: var(--radius-l); --video-radius-end: 0px; /* ── Parallax ── */ --parallax-distance: 15%; /* ── Image reveal (clip-path wipe) ── */ --reveal-clip-start: inset(0 100% 0 0); --reveal-clip-end: inset(0 0% 0 0); } } /* end @layer tokens :root */ /* ════════════════════════════════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════════════════════════════════ */ @layer tokens { @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 150ms; --duration-normal: 150ms; --duration-slow: 150ms; --duration-slower: 150ms; --duration-page: 150ms; --duration-reveal: 0ms; --duration-hero: 0ms; --ease-default: linear; --ease-in: linear; --ease-out: linear; --ease-in-out: linear; --ease-spring: linear; --ease-gsap-out: linear; --ease-gsap-in-out: linear; } } } /* ════════════════════════════════════════════════════════════════════ THEME OVERRIDES: DARK ════════════════════════════════════════════════════════════════════ */ @layer tokens { [data-theme="dark"] { --text-main: var(--white); --text-heading: var(--white); --text-body: oklch(85% 0.005 256); --text-muted: oklch(70% 0.006 256); --text-subtle: oklch(55% 0.005 256); --text-link: var(--primary-light); --text-link-hover: var(--primary-ultra-light); --text-link-visited: var(--primary-semi-light); --text-accent: var(--secondary-light); --icon-color: var(--primary-light); --card-accent: var(--primary-light); --card-accent-strip: 3px solid var(--secondary-light); --body-bg: var(--black); --surface-page: var(--black); --surface-raised: var(--neutral-ultra-dark); --surface-sunken: oklch(15% 0.008 256); --surface-tinted: oklch(20% 0.025 256); --surface-highlight: oklch(22% 0.030 256); --border-subtle: oklch(20% 0.008 256); --border-default: oklch(28% 0.008 256); --border-strong: oklch(40% 0.008 256); --card-bg: var(--surface-raised); --card-border: 1px solid var(--border-subtle); --card-shadow: 0 2px 8px oklch(0% 0 0 / 30%); --input-bg: var(--surface-sunken); --input-bg-hover: var(--surface-tinted); --input-border: 1px solid var(--border-default); --input-border-hover: 1px solid var(--border-strong); --btn-primary-bg: var(--primary-light); --btn-primary-text: var(--primary-ultra-dark); --btn-primary-bg-hover: var(--primary); --btn-primary-bg-active: var(--primary-semi-dark); --btn-primary-shadow: 0 4px 20px color-mix(in oklch, var(--primary-light) 25%, transparent); --btn-outline-border: var(--primary-light); --btn-outline-text: var(--primary-light); --btn-outline-bg-hover: var(--primary-light); --btn-outline-text-hover: var(--primary-ultra-dark); --btn-ghost-text: var(--primary-light); --btn-ghost-bg-hover: color-mix(in oklch, var(--primary-light) 10%, transparent); --table-header-bg: var(--surface-tinted); --table-row-stripe-bg: oklch(18% 0.020 256); --table-border: 1px solid var(--border-subtle); --nav-item-active-bg: var(--surface-tinted); --nav-item-hover-bg: color-mix(in oklch, var(--primary-light) 8%, transparent); --progress-track-bg: oklch(25% 0.006 256); --modal-bg: var(--neutral-ultra-dark); --feedback-success: oklch(55% 0.145 150); --feedback-warning: oklch(58% 0.125 72); --feedback-error: oklch(58% 0.165 25); --feedback-info: oklch(55% 0.070 256); } } /* ════════════════════════════════════════════════════════════════════ THEME OVERRIDES: PRIMARY (navy sections) ════════════════════════════════════════════════════════════════════ */ @layer tokens { [data-theme="primary"] { --text-main: var(--white); --text-heading: var(--white); --text-body: var(--white); --text-muted: oklch(90% 0.012 256); --text-subtle: oklch(82% 0.015 256); --text-link: var(--white); --text-link-hover: var(--primary-ultra-light); --text-link-visited: oklch(88% 0.018 256); --body-bg: var(--primary); --surface-page: var(--primary); --surface-raised: var(--primary-semi-dark); --surface-sunken: var(--primary-dark); --surface-tinted: var(--primary-semi-dark); --surface-highlight: oklch(45% 0.080 256); --border-subtle: oklch(50% 0.040 256); --border-default: oklch(60% 0.030 256); --border-strong: oklch(72% 0.020 256); --btn-primary-bg: var(--white); --btn-primary-text: var(--primary); --btn-primary-bg-hover: var(--secondary); --btn-primary-bg-active: var(--secondary-dark); --btn-primary-shadow: 0 4px 20px oklch(20% 0.05 256 / 40%); --btn-outline-border: var(--white); --btn-outline-text: var(--white); --btn-outline-bg-hover: var(--white); --btn-outline-text-hover: var(--primary); --btn-ghost-text: var(--white); --btn-ghost-bg-hover: color-mix(in oklch, var(--white) 14%, transparent); --input-bg: var(--primary-dark); --input-bg-hover: var(--primary-semi-dark); --input-border: 1px solid oklch(55% 0.040 256); --nav-item-active-bg: oklch(45% 0.080 256); --nav-item-active-border: 2px solid var(--white); --nav-item-hover-bg: color-mix(in oklch, var(--white) 12%, transparent); } } /* ════════════════════════════════════════════════════════════════════ THEME OVERRIDES: SECONDARY (orange sections) ════════════════════════════════════════════════════════════════════ */ @layer tokens { [data-theme="secondary"] { --text-main: var(--white); --text-heading: var(--white); --text-body: var(--white); --text-muted: oklch(92% 0.020 41); --text-subtle: oklch(85% 0.025 41); --text-link: var(--white); --text-link-hover: var(--secondary-ultra-light); --text-link-visited: oklch(88% 0.030 41); --body-bg: var(--secondary); --surface-page: var(--secondary); --surface-raised: var(--secondary-semi-dark); --surface-sunken: var(--secondary-dark); --surface-tinted: var(--secondary-semi-dark); --surface-highlight: oklch(65% 0.120 41); --border-subtle: oklch(68% 0.060 41); --border-default: oklch(75% 0.045 41); --border-strong: oklch(85% 0.030 41); --btn-primary-bg: var(--white); --btn-primary-text: var(--secondary); --btn-primary-bg-hover: var(--primary); --btn-primary-bg-active: var(--primary-dark); --btn-outline-border: var(--white); --btn-outline-text: var(--white); --btn-outline-bg-hover: var(--white); --btn-outline-text-hover: var(--secondary); --btn-ghost-text: var(--white); --btn-ghost-bg-hover: color-mix(in oklch, var(--white) 14%, transparent); --nav-item-active-bg: var(--surface-tinted); --nav-item-hover-bg: color-mix(in oklch, var(--white) 10%, transparent); } } /* ════════════════════════════════════════════════════════════════════ LAYOUT PRIMITIVE RULES ════════════════════════════════════════════════════════════════════ .section — padding-block + padding-inline ONLY. Never add flex/grid/max-width. .container — max-inline-size + margin-inline: auto ONLY. Never add padding/flex/grid. .stack — display: flex + flex-direction: column + gap ONLY. .grid — display: grid + gap ONLY. Every page section follows: .section > .container > content .section owns vertical rhythm (padding-block) .container owns horizontal constraint (max-inline-size) Content inside uses .stack or .grid for layout NEVER add flex, grid, or padding to .section or .container. NEVER skip .section > .container — both are always required. Full-bleed elements break out of .container, they don't skip it. ════════════════════════════════════════════════════════════════════ */