/* ============================================================ Graphline Systems - Core Tokens Aligned to the Graphline brand mark (graph constellation). Aesthetic: "Engineering-grade, dark." Deep brand-navy canvas, cool near-white ink, one decisive cyan accent that glows on the dark surfaces (and clears WCAG AA as text on navy). Steel for muted text and hairlines. Small radii, restrained black-tinted shadows. Precise, senior, quiet. Brand palette: navy #0B1F33 cyan #00C2D1 slate #465A69 black #000000 Font @import / @font-face live in fonts.css (self-hosted). ============================================================ */ :root { /* ====================================================== COLOR - RAW PALETTE (brand-provided) ====================================================== */ --brand-navy: #0B1F33; /* primary canvas, brand mark base */ --brand-cyan: #00C2D1; /* the one accent */ --brand-slate: #465A69; /* structural / secondary */ --brand-black: #000000; --white: #FFFFFF; /* NAVY RAMP - cool, single-hue surfaces (dark -> light) */ --navy-950: #05121E; /* deepest: wells, code blocks */ --navy-900: #081A2B; /* recessed feature panels & bands */ --navy-800: #14304A; /* raised content cards */ --navy-700: #1B3A57; /* card hover / active surface */ --navy-600: #244766; /* strongest surface / outline fill */ /* STEEL / SLATE RAMP - text, captions, hairlines (light -> dark) */ --steel-100: #DCE6EF; /* brightest captions on dark */ --steel-200: #B7C7D5; --steel-300: #93A8B8; /* muted text */ --steel-400: #6E869A; /* subtle text / tertiary captions */ --slate-500: #465A69; /* = brand slate */ --slate-600: #384B57; /* CYAN RAMP - the one energetic accent */ --cyan-300: #5FE0EA; /* bright hover / glow */ --cyan-400: #2FD3E0; --cyan-500: #00C2D1; /* = brand cyan */ --cyan-600: #00A2B0; /* pressed */ /* Semantic - surfaces & ink */ --bg: var(--brand-navy); /* page canvas = brand navy */ --bg-raised: var(--navy-800); /* cards, panels lift off canvas */ --bg-sunken: var(--navy-950); /* wells, code blocks, inset chips */ --bg-panel: var(--navy-900); /* recessed feature panels / dark bands */ --bg-inverse: var(--steel-100); /* rare light chip on dark */ --fg: #E8EFF5; /* primary text (cool near-white) */ --fg-muted: var(--steel-300); /* secondary text */ --fg-subtle: var(--steel-400); /* tertiary / captions */ --fg-on-dark: #E8EFF5; /* text on panels (same family now) */ --fg-on-accent: var(--navy-950); /* dark ink on cyan (AA on #00C2D1) */ --border: rgba(141, 166, 186, 0.16); /* default hairline on navy */ --border-strong: rgba(141, 166, 186, 0.30); /* emphasized divider */ --border-ink: rgba(141, 166, 186, 0.46); /* outline on raised elements */ --accent: var(--cyan-500); /* the one energetic accent */ --accent-ink: var(--navy-950); /* text/icon on an accent fill */ --accent-hover: var(--cyan-300); /* brighter cyan on hover */ --accent-pressed:var(--cyan-600); --accent-soft: rgba(0, 194, 209, 0.13); /* tinted chip / icon surface */ --accent-line: rgba(0, 194, 209, 0.34); /* hairline in accent hue */ /* Semantic - status (tuned for dark, used sparingly) */ --ok: #34D399; /* uptime / available green */ --warn: #FBBF24; /* warm amber */ --crit: #F87171; /* incident red */ --info: var(--steel-300); /* ====================================================== TYPE - FAMILIES ====================================================== */ --font-display: 'Schibsted Grotesk', system-ui, sans-serif; /* headlines */ --font-sans: 'Inter', system-ui, sans-serif; /* body / UI (self-hosted brand font) */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* labels / code / metrics */ /* TYPE - SCALE (1.25 major-third-ish, tightened at top) */ --t-display: 4.5rem; /* 72 - hero */ --t-h1: 3rem; /* 48 */ --t-h2: 2.25rem; /* 36 */ --t-h3: 1.5rem; /* 24 */ --t-h4: 1.25rem; /* 20 */ --t-body-lg: 1.125rem; /* 18 */ --t-body: 1rem; /* 16 */ --t-small: 0.875rem; /* 14 */ --t-eyebrow: 0.75rem; /* 12 - mono labels */ --t-micro: 0.6875rem;/* 11 */ /* TYPE - WEIGHTS */ --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; /* TYPE - LINE HEIGHT */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* TYPE - TRACKING */ --tr-tight: -0.02em; /* display */ --tr-normal: 0; --tr-wide: 0.04em; --tr-eyebrow: 0.14em; /* mono eyebrows, ALL-CAPS */ /* ====================================================== SPACE - 4px base scale ====================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* RADII - small, engineered */ --r-xs: 3px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* BORDERS */ --bw-hair: 1px; --bw-med: 1.5px; /* SHADOWS - on dark, depth comes from surface + border; shadows are deep black and restrained */ --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --sh-md: 0 6px 18px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.30); --sh-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.30); --sh-focus: 0 0 0 3px rgba(0, 194, 209, 0.38); /* MOTION */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; /* LAYOUT */ --maxw: 1200px; --maxw-text: 68ch; } /* ============================================================ SEMANTIC ELEMENT STYLES - opt-in via .ds- classes ============================================================ */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--w-medium); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent); } .ds-display { font-family: var(--font-display); font-size: var(--t-display); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg); } .ds-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg); } .ds-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); } .ds-h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--fg); } .ds-h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--fg); } .ds-body { font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg); } .ds-body-lg { font-family: var(--font-sans); font-size: var(--t-body-lg); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg); } .ds-small { font-family: var(--font-sans); font-size: var(--t-small); font-weight: var(--w-regular); line-height: var(--lh-normal); color: var(--fg-muted); } .ds-mono { font-family: var(--font-mono); font-size: var(--t-small); font-weight: var(--w-regular); color: var(--fg-muted); } .ds-metric { font-family: var(--font-mono); font-size: var(--t-h2); font-weight: var(--w-semibold); letter-spacing: var(--tr-tight); color: var(--fg); font-variant-numeric: tabular-nums; } code, .ds-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-sunken); border: var(--bw-hair) solid var(--border); border-radius: var(--r-xs); padding: 0.1em 0.4em; color: var(--steel-100); }