/* ============================================================================ ATHRIOS — Core Brand Tokens · aligned with the Xavio by Athrios system ---------------------------------------------------------------------------- Athrios is the enterprise value execution company; Xavio by Athrios is its first product. They are ONE HOUSE. This file deliberately shares Xavio's foundations so artifacts are cross-compatible: • ONE signal — EMBER #FF4A2E (Xavio's brand signal, not the product orange) • TWO surfaces — PAPER (warm light) and INK (warm-deep dark) • ONE type system — Archivo (display) · Inter (UI) · JetBrains Mono (mono) Difference of register, not of vocabulary: • ATHRIOS (parent) leads on PAPER — premium, editorial, restrained, lots of air. • XAVIO (product) leads on INK — operational, dense, functional palette. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── BRAND SIGNAL — EMBER (shared with Xavio) ───────────────────────── */ --ember: #FF4A2E; /* primary signal · convergence node · CTA */ --ember-bright: #FF6A4E; /* hover / glow */ --ember-deep: #D5371C; /* pressed / ember-on-light */ --ember-tint: rgba(255,74,46,0.12); --ember-tint-2: rgba(255,74,46,0.20); --ember-line: rgba(255,74,46,0.40); --text-on-ember:#0B0D0F; /* near-black warm — text on ember fills */ /* ── PAPER — Athrios default surface world (warm light) ─────────────── */ --paper: #FBFAF7; /* base canvas */ --paper-raised: #FFFFFF; /* cards on paper */ --paper-sunken: #F1EFE9; /* wells, secondary fills */ --paper-tint: #F6F3EC; /* faint warm panel */ --ink-hi: #14171A; /* primary text on paper */ --ink-mid: #565B61; /* secondary text on paper */ --ink-lo: #8A8F95; /* captions on paper */ --line-paper: rgba(20,23,26,0.10); --line-paper-strong: rgba(20,23,26,0.16); --shadow-paper-sm: 0 1px 2px rgba(20,23,26,0.06), 0 2px 6px rgba(20,23,26,0.05); --shadow-paper-md: 0 4px 16px rgba(20,23,26,0.08), 0 12px 32px rgba(20,23,26,0.06); --shadow-paper-lg: 0 24px 60px -20px rgba(20,23,26,0.20); /* ── INK — Athrios dark sections (shared with the Xavio control-plane) ─ */ --ink-base: #07090F; /* deepest dark background */ --ink-sunken: #050608; --ink-raised: #0C1117; /* sidebar / top bar */ --ink-card: #11161F; /* cards / panels */ --ink-card-hover:#161C26; --ink-elevated: #1B222D; --text-hi: #F4F1EA; /* bone — headings on ink */ --text-mid: #A4ACB8; /* body on ink */ --text-lo: #707A88; /* captions on ink */ --text-faint: #49515E; --line-subtle: rgba(255,255,255,0.05); --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16); /* warm-ink alternative (Athrios "Ink Atelier" register — warmer than product) */ --ink-warm: #17140F; --ink-warm-raised:#211D17; --sand: #C9B79C; /* brass/sand premium neutral for warm-ink use */ /* ── TYPOGRAPHY (shared with Xavio) ─────────────────────────────────── */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Cascadia Code', Consolas, monospace; --fs-display: clamp(44px, 6.4vw, 88px); --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 22px; --fs-h4: 17px; --fs-body-lg: 18px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px; --fs-2xs: 11px; --fs-mono: 13px; --lh-tight: 1.03; --lh-snug: 1.18; --lh-normal: 1.55; --lh-relaxed: 1.65; --tracking-tight: -0.025em; /* display & large headings (Archivo) */ --tracking-snug: -0.01em; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrows / uppercase micro-labels */ /* ── SPACING — 8pt grid (shared) ────────────────────────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; /* ── RADIUS (shared) ────────────────────────────────────────────────── */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px; /* ── MOTION — calm, precise, no bounce (shared) ─────────────────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms; /* ── XAVIO PRODUCT EXTENSION — functional palette (NOT Athrios corp colors) Used inside the product for information design only. ─────────────── */ --fn-blue:#3B82F6; --fn-purple:#8B5CF6; --fn-amber:#F59E0B; --fn-teal:#10B981; --fn-pink:#EC4899; --fn-green:#22C55E; --fn-red:#EF4444; --fn-slate:#6B7280; /* functional -tint (12%) and -line (40%) variants — info-design surfaces/borders */ --fn-blue-tint:rgba(59,130,246,0.12); --fn-blue-line:rgba(59,130,246,0.40); --fn-purple-tint:rgba(139,92,246,0.12); --fn-purple-line:rgba(139,92,246,0.40); --fn-amber-tint:rgba(245,158,11,0.12); --fn-amber-line:rgba(245,158,11,0.40); --fn-teal-tint:rgba(16,185,129,0.12); --fn-teal-line:rgba(16,185,129,0.40); --fn-pink-tint:rgba(236,72,153,0.12); --fn-pink-line:rgba(236,72,153,0.40); --fn-green-tint:rgba(34,197,94,0.12); --fn-green-line:rgba(34,197,94,0.40); --fn-red-tint:rgba(239,68,68,0.12); --fn-red-line:rgba(239,68,68,0.40); --fn-slate-tint:rgba(107,114,128,0.12); --fn-slate-line:rgba(107,114,128,0.40); } /* ============================================================================ SEMANTIC TYPE — defaults assume a PAPER (light) surface for Athrios. Wrap a region in .on-ink to flip text colors for dark sections. ========================================================================== */ .ath-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink-hi); } .ath-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink-hi); } .ath-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink-hi); } .ath-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--ink-hi); } .ath-body-lg { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-mid); } .ath-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-mid); } .ath-eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ember); } .ath-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); color: var(--ink-lo); font-feature-settings: 'ss01','zero'; } .ath-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } /* dark-surface overrides */ .on-ink { background: var(--ink-base); color: var(--text-hi); } .on-ink .ath-display, .on-ink .ath-h1, .on-ink .ath-h2, .on-ink .ath-h3 { color: var(--text-hi); } .on-ink .ath-body-lg, .on-ink .ath-body { color: var(--text-mid); } .on-ink .ath-mono { color: var(--text-lo); } .ath-ember { color: var(--ember); } /* engineered precision grid (drafting-table motif, shared with Xavio) */ .ath-grid-paper { background-color: var(--paper); background-image: linear-gradient(rgba(20,23,26,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,23,26,0.045) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; }