/* ============================================================ ARGOS DESIGN SYSTEM — COLORS & TYPE ============================================================ ArgosCSS projects safety, care, and watchful protection — the Argos Panoptes of your projects. The palette is rooted in deep cerulean, blue-hued neutrals, and amber — calm, confident, vigilant. Typography pairs Havelock Titling (display, uppercase) with Montserrat (body) and a mono. ============================================================ */ /* ---------- FONT IMPORTS ---------- */ /* Havelock Titling — Adobe Typekit (display). Load in : */ @import url("https://use.typekit.net/noy0wmx.css"); /* Montserrat — body/UI. JetBrains Mono — technical accents. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ============================================================ COLOR SYSTEM — OKLCH anchor-derived ============================================================ All brand colors derive from two OKLCH anchors + a neutral anchor. Change the anchor, the whole ramp follows. This is the source of truth — everything else is tokens. ============================================================ */ /* ■■ ANCHORS ■■ */ --primary-C: 0.08; --primary-H: 253; /* deep cerulean-violet */ --anchor-primary: oklch(0.35 var(--primary-C) var(--primary-H)); --secondary-C: 0.15; --secondary-H: 70; /* warm amber */ --anchor-secondary: oklch(0.70 var(--secondary-C) var(--secondary-H)); /* Neutral anchor — shares primary hue, desaturated. Lets neutrals feel like part of the same family without being pure gray. */ --neutral-C: 0.015; --neutral-H: var(--primary-H); --anchor-neutral: oklch(0.50 var(--neutral-C) var(--neutral-H)); /* ============================================================ BRAND PRIMARY — cerulean ramp 10 = lightest, 100 = darkest. 50 is the anchor. ============================================================ */ --brand-primary-10: oklch(from var(--anchor-primary) calc(l + 0.50) calc(c - 0.03) h); --brand-primary-20: oklch(from var(--anchor-primary) calc(l + 0.375) calc(c - 0.0225) h); --brand-primary-30: oklch(from var(--anchor-primary) calc(l + 0.25) calc(c - 0.015) h); --brand-primary-40: oklch(from var(--anchor-primary) calc(l + 0.125) calc(c - 0.0075) h); --brand-primary-50: var(--anchor-primary); --brand-primary-60: oklch(from var(--anchor-primary) calc(l - 0.04) c h); --brand-primary-70: oklch(from var(--anchor-primary) calc(l - 0.08) c h); --brand-primary-80: oklch(from var(--anchor-primary) calc(l - 0.12) c h); --brand-primary-90: oklch(from var(--anchor-primary) calc(l - 0.16) c h); --brand-primary-100: oklch(from var(--anchor-primary) calc(l - 0.20) c h); /* Primary-alt — shifted darker. For hover/active, depth layers. */ --brand-primary-alt-10: oklch(from var(--anchor-primary) calc(l + 0.375) calc(c - 0.0225) h); --brand-primary-alt-20: oklch(from var(--anchor-primary) calc(l + 0.250) calc(c - 0.0150) h); --brand-primary-alt-30: oklch(from var(--anchor-primary) calc(l + 0.125) calc(c - 0.0075) h); --brand-primary-alt-40: var(--anchor-primary); --brand-primary-alt-50: oklch(from var(--anchor-primary) calc(l - 0.04) calc(c - 0.01) h); --brand-primary-alt-60: oklch(from var(--anchor-primary) calc(l - 0.08) calc(c - 0.01) h); --brand-primary-alt-70: oklch(from var(--anchor-primary) calc(l - 0.12) calc(c - 0.01) h); --brand-primary-alt-80: oklch(from var(--anchor-primary) calc(l - 0.16) calc(c - 0.01) h); --brand-primary-alt-90: oklch(from var(--anchor-primary) calc(l - 0.20) calc(c - 0.01) h); --brand-primary-alt-100: oklch(from var(--anchor-primary) calc(l - 0.24) calc(c - 0.01) h); /* ============================================================ BRAND SECONDARY — amber ramp ============================================================ */ --brand-secondary-10: oklch(from var(--anchor-secondary) calc(l + 0.180) c h); --brand-secondary-20: oklch(from var(--anchor-secondary) calc(l + 0.135) c h); --brand-secondary-30: oklch(from var(--anchor-secondary) calc(l + 0.090) c h); --brand-secondary-40: oklch(from var(--anchor-secondary) calc(l + 0.045) c h); --brand-secondary-50: var(--anchor-secondary); --brand-secondary-60: oklch(from var(--anchor-secondary) calc(l - 0.08) calc(c - 0.02) h); --brand-secondary-70: oklch(from var(--anchor-secondary) calc(l - 0.16) calc(c - 0.04) h); --brand-secondary-80: oklch(from var(--anchor-secondary) calc(l - 0.24) calc(c - 0.06) h); --brand-secondary-90: oklch(from var(--anchor-secondary) calc(l - 0.32) calc(c - 0.08) h); --brand-secondary-100: oklch(from var(--anchor-secondary) calc(l - 0.40) calc(c - 0.10) h); --brand-secondary-alt-10: oklch(from var(--anchor-secondary) calc(l + 0.135) c h); --brand-secondary-alt-20: oklch(from var(--anchor-secondary) calc(l + 0.090) c h); --brand-secondary-alt-30: oklch(from var(--anchor-secondary) calc(l + 0.045) c h); --brand-secondary-alt-40: var(--anchor-secondary); --brand-secondary-alt-50: oklch(from var(--anchor-secondary) calc(l - 0.08) calc(c - 0.02) h); --brand-secondary-alt-60: oklch(from var(--anchor-secondary) calc(l - 0.16) calc(c - 0.04) h); --brand-secondary-alt-70: oklch(from var(--anchor-secondary) calc(l - 0.24) calc(c - 0.06) h); --brand-secondary-alt-80: oklch(from var(--anchor-secondary) calc(l - 0.32) calc(c - 0.08) h); --brand-secondary-alt-90: oklch(from var(--anchor-secondary) calc(l - 0.40) calc(c - 0.10) h); --brand-secondary-alt-100: oklch(from var(--anchor-secondary) calc(l - 0.48) calc(c - 0.12) h); /* ============================================================ NEUTRAL — blue-tinted grays derived from primary hue ============================================================ */ --neutral-10: oklch(from var(--anchor-neutral) calc(l + 0.47) c h); /* near-white */ --neutral-20: oklch(from var(--anchor-neutral) calc(l + 0.38) c h); --neutral-30: oklch(from var(--anchor-neutral) calc(l + 0.28) c h); --neutral-40: oklch(from var(--anchor-neutral) calc(l + 0.15) c h); --neutral-50: var(--anchor-neutral); --neutral-60: oklch(from var(--anchor-neutral) calc(l - 0.12) c h); --neutral-70: oklch(from var(--anchor-neutral) calc(l - 0.22) c h); --neutral-80: oklch(from var(--anchor-neutral) calc(l - 0.30) c h); --neutral-90: oklch(from var(--anchor-neutral) calc(l - 0.36) c h); /* primary surface */ --neutral-100: oklch(from var(--anchor-neutral) calc(l - 0.42) c h); /* deepest ground */ /* ============================================================ SEMANTIC ACCENTS — tuned to the primary (253°) and secondary (70°) anchors. Each role ships as a trio for use on a DARK canvas: -soft · low-L translucent-feeling surface (for badge/alert bg) base · the accent itself (for borders, icons, strong text) -on · bright foreground for text placed on -soft ============================================================ */ /* Success · teal-green, complementary to primary 253° */ --success-soft: oklch(0.22 0.04 165); --success: oklch(0.62 0.11 165); --success-on: oklch(0.90 0.06 165); /* Warning · hotter amber, offset from secondary anchor so it doesn't blend */ --warning-soft: oklch(0.24 0.05 55); --warning: oklch(0.72 0.15 55); --warning-on: oklch(0.92 0.08 55); /* Danger · oxblood red, warm register shared with secondary */ --danger-soft: oklch(0.24 0.06 22); --danger: oklch(0.62 0.17 22); --danger-on: oklch(0.92 0.06 22); /* Info · deeper cyan-blue, adjacent to primary 253° but cooler/lighter */ --info-soft: oklch(0.23 0.05 230); --info: oklch(0.65 0.12 230); --info-on: oklch(0.90 0.05 230); /* ============================================================ SEMANTIC TOKENS — use these in product ============================================================ */ /* Surfaces — layered from deepest to highest */ --surface-ground: var(--neutral-100); --surface-base: var(--neutral-90); --surface-raised: var(--neutral-80); --surface-overlay: var(--neutral-70); --surface-inset: oklch(from var(--anchor-neutral) calc(l - 0.46) c h); /* Foreground — text hierarchy */ --fg-1: var(--neutral-10); /* primary */ --fg-2: var(--neutral-20); /* body */ --fg-3: var(--neutral-40); /* secondary / muted */ --fg-4: var(--neutral-50); /* tertiary / disabled */ /* ============================================================ FIVE-LEVEL BRAND RAMPS Every brand family exposes the same five slots so components can swap families without reshuffling styles: minimal — tinted wash, text/bg on dark canvases, subtle fills light — soft surface, hover-on-dark, chip bg regular — the working accent (50 anchor) dark — pressed/active state, text on soft surfaces contrast — foreground paired with -regular as background ============================================================ */ /* Brand · primary cerulean */ --brand-minimal: var(--brand-primary-20); --brand-light: var(--brand-primary-40); --brand-regular: var(--brand-primary-50); --brand-dark: var(--brand-primary-70); --brand-contrast: var(--brand-primary-100); /* Accent · secondary amber */ --accent-minimal: var(--brand-secondary-20); --accent-light: var(--brand-secondary-40); --accent-regular: var(--brand-secondary-50); --accent-dark: var(--brand-secondary-70); --accent-contrast: var(--brand-secondary-100); /* Secondary · neutral-tinted — supporting, calmer than brand/accent */ --secondary-minimal: var(--neutral-20); --secondary-light: var(--neutral-30); --secondary-regular: var(--neutral-50); --secondary-dark: var(--neutral-70); --secondary-contrast: var(--neutral-100); /* Back-compat shorthands (old names map to the 5-level ramp) */ --brand: var(--brand-regular); --brand-hover: var(--brand-light); --brand-active: var(--brand-dark); --brand-soft: var(--brand-primary-90); --brand-on: var(--neutral-10); /* FG on --brand-regular button surfaces */ --accent: var(--accent-regular); --accent-hover: var(--accent-light); --accent-soft: var(--brand-secondary-90); --accent-on: var(--neutral-100); /* FG on --accent-regular amber surfaces */ /* Borders & dividers — derived from neutral for cohesion */ --border-subtle: color-mix(in oklab, var(--neutral-20) 8%, transparent); --border-default: color-mix(in oklab, var(--neutral-20) 14%, transparent); --border-strong: color-mix(in oklab, var(--neutral-20) 24%, transparent); --border-brand: var(--brand-primary-60); --border-accent: var(--brand-secondary-60); /* Focus ring — amber, always visible */ --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--brand-secondary-50); /* Color scheme hint for native UI (scrollbars, form controls) */ color-scheme: dark; } /* ============================================================ LIGHT THEME — opt-in via [data-theme="light"] on or . Also supports prefers-color-scheme: light when [data-theme="auto"] is set. Primitives stay; only semantic tokens flip. The light surface is a warm ivory (anchored to neutral hue 253°) with cerulean kept as brand and amber kept as accent — the brand identity holds across both modes. ============================================================ */ :root[data-theme="light"], [data-theme="light"] { /* Surfaces — warm-tinted whites, never pure */ --surface-ground: oklch(from var(--anchor-neutral) 0.985 calc(c * 0.6) h); /* page bg */ --surface-base: oklch(from var(--anchor-neutral) 0.97 calc(c * 0.8) h); /* panels */ --surface-raised: oklch(from var(--anchor-neutral) 0.995 calc(c * 0.4) h); /* cards */ --surface-overlay: oklch(from var(--anchor-neutral) 1.00 0 h); /* tooltips */ --surface-inset: oklch(from var(--anchor-neutral) 0.945 calc(c * 0.9) h); /* inputs */ /* Foreground — deep cerulean-tinted ink, not pure black */ --fg-1: var(--neutral-100); /* primary text */ --fg-2: var(--neutral-90); /* body */ --fg-3: oklch(from var(--anchor-neutral) 0.42 c h); /* muted */ --fg-4: oklch(from var(--anchor-neutral) 0.58 c h); /* tertiary */ /* Brand ramps re-tuned: on light, the working accent runs darker so it holds enough contrast on ivory surfaces. Note: -contrast tokens are the OPPOSITE pole of -minimal so foreground on a -minimal background reads strongly (and vice versa). */ --brand-minimal: var(--brand-primary-10); --brand-light: var(--brand-primary-20); --brand-regular: var(--brand-primary-70); --brand-dark: var(--brand-primary-90); --brand-contrast: var(--brand-primary-100); --accent-minimal: var(--brand-secondary-10); --accent-light: var(--brand-secondary-20); --accent-regular: var(--brand-secondary-70); --accent-dark: var(--brand-secondary-90); --accent-contrast: var(--brand-secondary-100); --secondary-minimal: oklch(from var(--anchor-neutral) 0.96 calc(c * 0.6) h); --secondary-light: oklch(from var(--anchor-neutral) 0.90 calc(c * 0.8) h); --secondary-regular: oklch(from var(--anchor-neutral) 0.45 c h); --secondary-dark: var(--neutral-90); --secondary-contrast: var(--neutral-100); /* Status — softs are tinted washes, base for borders/icons, "on" is a deep ink that holds 7:1+ on the soft surface */ --success-soft: oklch(0.95 0.04 165); --success: oklch(0.50 0.13 165); --success-on: oklch(0.22 0.07 165); --warning-soft: oklch(0.96 0.06 70); --warning: oklch(0.62 0.16 55); --warning-on: oklch(0.26 0.09 55); --danger-soft: oklch(0.95 0.04 22); --danger: oklch(0.55 0.18 22); --danger-on: oklch(0.26 0.10 22); --info-soft: oklch(0.95 0.04 230); --info: oklch(0.52 0.14 230); --info-on: oklch(0.24 0.08 230); /* Compat shorthands re-pointed for light — brand/accent text on saturated brand/accent fills uses the lightest end of the ramp for max contrast. */ --brand: var(--brand-regular); --brand-hover: var(--brand-dark); --brand-active: oklch(from var(--anchor-primary) calc(l - 0.18) c h); --brand-soft: var(--brand-primary-10); --brand-on: var(--brand-primary-10); --accent: var(--accent-regular); --accent-hover: var(--accent-dark); --accent-soft: var(--brand-secondary-10); --accent-on: var(--brand-secondary-10); /* Borders — derived from ink at low opacity */ --border-subtle: color-mix(in oklab, var(--neutral-100) 8%, transparent); --border-default: color-mix(in oklab, var(--neutral-100) 14%, transparent); --border-strong: color-mix(in oklab, var(--neutral-100) 28%, transparent); --border-brand: var(--brand-primary-60); --border-accent: var(--brand-secondary-70); /* Focus ring — amber, slightly darker on light surface */ --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--brand-secondary-60); /* Shadows — stay warm but lighter & shorter on light surfaces */ --shadow-xs: 0 1px 0 0 rgba(20,30,50,0.05); --shadow-sm: 0 1px 2px 0 rgba(20,30,50,0.08), 0 1px 0 0 rgba(255,255,255,0.6) inset; --shadow-md: 0 4px 12px -2px rgba(20,30,50,0.10), 0 1px 0 0 rgba(255,255,255,0.7) inset; --shadow-lg: 0 12px 28px -8px rgba(20,30,50,0.16), 0 1px 0 0 rgba(255,255,255,0.8) inset; --shadow-xl: 0 24px 48px -16px rgba(20,30,50,0.22), 0 1px 0 0 rgba(255,255,255,0.9) inset; --shadow-brand: 0 8px 24px -6px color-mix(in oklab, var(--brand-primary-50) 35%, transparent); --shadow-accent: 0 0 0 1px var(--brand-secondary-60), 0 8px 24px -8px color-mix(in oklab, var(--brand-secondary-50) 35%, transparent); --shadow-inset: inset 0 2px 4px rgba(20,30,50,0.10), inset 0 0 0 1px rgba(20,30,50,0.04); color-scheme: light; } /* Auto mode — follow system preference when [data-theme="auto"] */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --surface-ground: oklch(from var(--anchor-neutral) 0.985 calc(c * 0.6) h); --surface-base: oklch(from var(--anchor-neutral) 0.97 calc(c * 0.8) h); --surface-raised: oklch(from var(--anchor-neutral) 0.995 calc(c * 0.4) h); --surface-overlay: oklch(from var(--anchor-neutral) 1.00 0 h); --surface-inset: oklch(from var(--anchor-neutral) 0.945 calc(c * 0.9) h); --fg-1: var(--neutral-100); --fg-2: var(--neutral-90); --fg-3: oklch(from var(--anchor-neutral) 0.42 c h); --fg-4: oklch(from var(--anchor-neutral) 0.58 c h); --brand-regular: var(--brand-primary-70); --brand-dark: var(--brand-primary-90); --accent-regular: var(--brand-secondary-70); --border-subtle: color-mix(in oklab, var(--neutral-100) 8%, transparent); --border-default: color-mix(in oklab, var(--neutral-100) 14%, transparent); --border-strong: color-mix(in oklab, var(--neutral-100) 28%, transparent); color-scheme: light; } } :root { /* ============================================================ COMPAT ALIASES — legacy tokens for existing components. New work should use the canonical tokens above. ============================================================ */ --cerulean-50: var(--brand-primary-10); --cerulean-100: var(--brand-primary-20); --cerulean-200: var(--brand-primary-30); --cerulean-300: var(--brand-primary-40); --cerulean-400: var(--brand-primary-50); --cerulean-500: var(--brand-primary-60); --cerulean-600: var(--brand-primary-70); --cerulean-700: var(--brand-primary-80); --cerulean-800: var(--brand-primary-90); --cerulean-900: var(--brand-primary-100); --cerulean-950: oklch(from var(--anchor-primary) calc(l - 0.24) c h); --abyss-50: var(--neutral-10); --abyss-100: var(--neutral-20); --abyss-200: var(--neutral-30); --abyss-300: var(--neutral-40); --abyss-400: var(--neutral-50); --abyss-500: var(--neutral-60); --abyss-600: var(--neutral-70); --abyss-700: var(--neutral-80); --abyss-800: var(--neutral-90); --abyss-900: var(--neutral-100); --abyss-950: oklch(from var(--anchor-neutral) calc(l - 0.46) c h); --amber-50: var(--brand-secondary-10); --amber-100: var(--brand-secondary-20); --amber-200: var(--brand-secondary-30); --amber-300: var(--brand-secondary-40); --amber-400: var(--brand-secondary-50); --amber-500: var(--brand-secondary-60); --amber-600: var(--brand-secondary-70); --amber-700: var(--brand-secondary-80); --amber-800: var(--brand-secondary-90); --amber-900: var(--brand-secondary-100); --ivory-50: var(--neutral-10); --ivory-100: var(--neutral-10); --ivory-200: var(--neutral-20); --ivory-300: var(--neutral-30); --ivory-400: var(--neutral-40); --ivory-500: var(--neutral-50); /* ============================================================ TYPOGRAPHY — families, weights, scale ============================================================ */ /* Families */ --font-display: 'havelock-titling-variable', 'Trajan Pro', 'Cinzel', Georgia, serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fluid type scale — editorial, high-contrast */ --fs-micro: 0.6875rem; /* 11px — labels, meta */ --fs-caption: 0.8125rem; /* 13px */ --fs-small: 0.9375rem; /* 15px */ --fs-body: 1.0625rem; /* 17px */ --fs-lead: 1.25rem; /* 20px */ --fs-h4: 1.5rem; /* 24px */ --fs-h3: 2rem; /* 32px */ --fs-h2: 2.75rem; /* 44px */ --fs-h1: 3.75rem; /* 60px */ --fs-display: 5.5rem; /* 88px — hero */ --fs-mega: clamp(4rem, 10vw, 9rem); /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.55; --lh-loose: 1.75; /* Letter-spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mega: 0.18em; /* for small-caps eyebrows */ /* ============================================================ SPACING — 4px base, warm rhythm ============================================================ */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 192px; /* ============================================================ RADIUS — mostly modest, reserving sharp corners for restraint ============================================================ */ --r-0: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; --r-2xl: 22px; --r-full: 9999px; /* ============================================================ SHADOWS — deep, warm, never gray ============================================================ */ --shadow-xs: 0 1px 0 0 rgba(0,0,0,0.3); --shadow-sm: 0 2px 6px -1px rgba(10,5,3,0.5), 0 1px 0 0 rgba(255,245,230,0.04) inset; --shadow-md: 0 6px 20px -4px rgba(10,5,3,0.55), 0 1px 0 0 rgba(255,245,230,0.05) inset; --shadow-lg: 0 18px 40px -12px rgba(10,5,3,0.7), 0 1px 0 0 rgba(255,245,230,0.06) inset; --shadow-xl: 0 30px 70px -20px rgba(0,0,0,0.75), 0 1px 0 0 rgba(255,245,230,0.08) inset; --shadow-brand: 0 12px 40px -8px color-mix(in oklab, var(--cerulean-700) 60%, transparent); --shadow-accent: 0 0 0 1px var(--amber-500), 0 10px 30px -10px color-mix(in oklab, var(--amber-400) 40%, transparent); /* Inner well — for inputs, insets */ --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,245,230,0.04); /* ============================================================ MOTION ============================================================ */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.6, 0.04, 0.98, 0.34); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-slower: 700ms; /* ============================================================ LAYOUT ============================================================ */ --container-sm: 640px; --container-md: 860px; --container-lg: 1120px; --container-xl: 1360px; --container-2xl: 1560px; } /* ============================================================ TYPOGRAPHIC PRIMITIVES Apply with .argos-* classes or by setting $font-body on body ============================================================ */ .t-display, h1.t-display { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: 0.01em; text-transform: uppercase; } .t-mega { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-mega); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; } .t-h1 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: 0.015em; text-transform: uppercase; } .t-h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: 0.02em; text-transform: uppercase; } .t-h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: 0.03em; text-transform: uppercase; } .t-h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .t-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); } .t-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); } .t-small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-body); } .t-caption { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-3); } .t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-micro); line-height: 1; letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--amber-400); } .t-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-body); letter-spacing: -0.01em; } .t-italic-display { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-regular); } /* Useful defaults when the whole page opts in */ .argos { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--surface-base); font-feature-settings: "ss01", "cv11"; }