/* ========================================================================= Skript — Colors & Type Tokens Dark-first system. Cyan is a functional accent: links, CTAs, highlights. ========================================================================= */ /* fonts.css is linked directly from every page's — importing it from here cost a serial round-trip before any text could paint. */ :root { /* ---------- Brand ---------- */ --skript-cyan: #05BDFF; /* signature accent — extracted from logo */ --skript-cyan-600: #00A3E0; /* press / hover-darker */ --skript-cyan-300: #7BDAFF; /* hover-lighter / tinted surfaces */ --skript-cyan-100: #D6F2FF; /* faintest tint, for on-light backgrounds */ --skript-navy: #091253; /* deep brand navy — from app icon */ --skript-navy-800: #0B1768; --skript-navy-900: #050930; /* deeper still, for layered surfaces */ --skript-ink: #091115; /* near-black, wordmark color */ /* ---------- Neutrals (slate family, cool-tilted to pair with navy) ---------- */ --slate-0: #FFFFFF; --slate-50: #F6F8FB; --slate-100: #EEF2F7; --slate-200: #DCE3ED; --slate-300: #B9C4D2; --slate-400: #8796AA; --slate-500: #5B6B80; --slate-600: #3E4B5E; --slate-700: #263041; --slate-800: #161D2B; --slate-900: #0B1018; --slate-950: #070A10; /* ---------- Semantic — dark mode (default) ---------- */ --bg-0: var(--slate-950); /* page */ --bg-1: var(--slate-900); /* card */ --bg-2: var(--slate-800); /* raised card / input */ --bg-3: var(--slate-700); /* hover / active */ --bg-brand: var(--skript-navy-900); --fg-1: #F3F6FA; /* primary text */ --fg-2: var(--slate-300); /* secondary text */ --fg-3: var(--slate-400); /* tertiary / captions */ --fg-muted: var(--slate-500); --fg-inverse: var(--skript-ink); --border-1: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.24); --accent: var(--skript-cyan); --accent-hover: var(--skript-cyan-300); --accent-press: var(--skript-cyan-600); --accent-on: var(--skript-ink); /* text/icon color ON cyan fills */ /* ---------- Status ---------- */ --success: #30D98C; --warning: #FFC24B; --danger: #FF5A6A; --info: var(--skript-cyan); /* ---------- Type ---------- */ --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scale (1920 wide marketing page; use rem-ish equivalents) */ --fs-display-1: 88px; --lh-display-1: 0.96; --ls-display-1: -0.035em; --fs-display-2: 64px; --lh-display-2: 1.02; --ls-display-2: -0.03em; --fs-h1: 44px; --lh-h1: 1.08; --ls-h1: -0.025em; --fs-h2: 32px; --lh-h2: 1.15; --ls-h2: -0.02em; --fs-h3: 22px; --lh-h3: 1.25; --ls-h3: -0.01em; --fs-lead: 20px; --lh-lead: 1.55; --ls-lead: -0.005em; --fs-body: 16px; --lh-body: 1.6; --ls-body: 0; --fs-small: 14px; --lh-small: 1.5; --ls-small: 0; --fs-caption: 12px; --lh-caption: 1.4; --ls-caption: 0.02em; --fs-overline: 12px; --lh-overline: 1.2; --ls-overline: 0.14em; /* UPPERCASE */ --fs-code: 14px; --lh-code: 1.55; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-heavy: 800; /* ---------- Spacing (4-pt base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ---------- Elevation / Shadows ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 24px 56px -16px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.4); --shadow-glow: 0 0 0 1px rgba(5,189,255,0.35), 0 0 48px -8px rgba(5,189,255,0.45); --inner-hairline: inset 0 1px 0 rgba(255,255,255,0.06); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(.2,.6,.2,1); --ease-emphasized: cubic-bezier(.2,.8,.2,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; } /* Light-mode token overrides (optional; opt-in via .theme-light) */ .theme-light { --bg-0: var(--slate-0); --bg-1: var(--slate-50); --bg-2: var(--slate-100); --bg-3: var(--slate-200); --bg-brand: var(--skript-navy); --fg-1: var(--skript-ink); --fg-2: var(--slate-700); --fg-3: var(--slate-500); --fg-muted: var(--slate-400); --fg-inverse: var(--slate-0); --border-1: rgba(9,17,21,0.08); --border-2: rgba(9,17,21,0.14); --border-strong: rgba(9,17,21,0.24); --accent-on: var(--skript-ink); --shadow-md: 0 8px 24px -8px rgba(9,18,83,0.18), 0 2px 6px rgba(9,18,83,0.08); --shadow-lg: 0 24px 56px -16px rgba(9,18,83,0.22), 0 4px 12px rgba(9,18,83,0.10); } /* ========================================================================= Semantic element styles ========================================================================= */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .h-display-1, .h-display-2, .h-1, .h-2, .h-3 { font-family: var(--font-display); } h1, .h-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-display-1); font-weight: var(--fw-medium); margin: 0; } .h-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-display-2); font-weight: var(--fw-medium); margin: 0; } h2, .h-1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); margin: 0; } h3, .h-2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold); margin: 0; } h4, .h-3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); margin: 0; } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--fg-2); } p { margin: 0 0 var(--space-4); color: var(--fg-2); } small, .text-small { font-size: var(--fs-small); line-height: var(--lh-small); } .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); } .overline { font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-3); } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: var(--fs-code); line-height: var(--lh-code); } code { padding: 2px 6px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-xs); color: var(--accent); } a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-1) var(--ease-standard); } a:hover { color: var(--accent-hover); text-decoration: underline; } ::selection { background: var(--skript-cyan); color: var(--skript-ink); }