/* ========================================================================== TATTOUH — design tokens Deep ink + electric cyan. Dark is the default; light is a first-class peer, not an afterthought. Every colour is declared in both. Theme resolution order: 1. [data-theme="dark"|"light"] on (explicit user choice) 2. prefers-color-scheme (system default) The inline script in sets the attribute before first paint. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — self-hosted variable woff2, no external requests -------------------------------------------------------------------------- */ @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-variable-ext.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2-variations'); font-weight: 100 800; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- Palette primitives — raw values, never used directly in components Brand names from the TATTOUH guidelines, section 02 "Colour palette": Ink #070B14 base dark surface Paper #F7F9FC base light surface Signal #22D3EE the cyan accent. "Used to guide attention, not flood the page" — keep it to CTAs, links, the symbol and highlights, never as a background field. Fog #E8EDF7 primary text on Ink Slate #8595B0 secondary text Amber #FBBF24 secondary accent, "use sparingly" -------------------------------------------------------------------------- */ :root { --ink-950: #05080F; --ink-900: #070B14; /* Ink */ --ink-850: #0B1220; --ink-800: #0E1626; --ink-700: #141F33; --ink-600: #1D2A42; --ink-500: #2A3A56; --slate-400: #5B6B87; --slate-300: #8595B0; /* Slate */ --slate-200: #B6C2D6; --slate-100: #D6DEEB; --slate-50: #E8EDF7; /* Fog */ --paper-50: #FFFFFF; --paper-100: #F7F9FC; /* Paper */ --paper-200: #EEF3F9; --paper-300: #DFE7F1; --cyan-400: #22D3EE; /* Signal */ --cyan-500: #06B6D4; --cyan-600: #0891B2; --sky-500: #0EA5E9; --sky-600: #0284C7; --sky-700: #0369A1; --amber-400: #FBBF24; /* Amber */ --amber-500: #F59E0B; --amber-700: #B45309; --emerald-400: #34D399; --emerald-600: #059669; --rose-400: #F87171; --rose-600: #DC2626; } /* -------------------------------------------------------------------------- Semantic tokens — DARK (default) -------------------------------------------------------------------------- */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: var(--ink-900); --bg-deep: var(--ink-950); --bg-elev: var(--ink-850); --surface: var(--ink-800); --surface-2: var(--ink-700); --surface-3: var(--ink-600); /* Glass: translucent fill + hairline + blur. The fill must stay dark enough that text on it passes contrast even over a bright backdrop. */ --glass-bg: rgba(14, 22, 38, 0.62); --glass-bg-strong: rgba(9, 15, 27, 0.93); /* Menu / drawer surfaces: effectively opaque so page content behind them can never show through and compete with the menu text. */ --panel-bg: rgba(8, 13, 24, 0.985); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-hover: rgba(34, 211, 238, 0.38); --glass-blur: 16px; --glass-blur-lg: 26px; --text: var(--slate-50); --text-strong: var(--paper-50); --text-muted: var(--slate-300); --text-dim: var(--slate-400); --text-on-primary: #04222B; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --rule: rgba(255, 255, 255, 0.06); --primary: var(--cyan-400); --primary-hover: #67E8F9; --primary-deep: var(--sky-500); --primary-soft: rgba(34, 211, 238, 0.12); --primary-soft-hover: rgba(34, 211, 238, 0.2); --accent: var(--amber-400); --accent-soft: rgba(251, 191, 36, 0.13); --success: var(--emerald-400); --danger: var(--rose-400); /* Ambient light behind hero and feature blocks. */ --glow-primary: 0 0 60px rgba(34, 211, 238, 0.28); --glow-soft: 0 0 90px rgba(34, 211, 238, 0.14); --aurora-1: rgba(34, 211, 238, 0.18); --aurora-2: rgba(14, 165, 233, 0.14); --aurora-3: rgba(251, 191, 36, 0.07); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-glass: 0 16px 48px rgba(0, 0, 0, 0.4); --grid-line: rgba(255, 255, 255, 0.035); --noise-opacity: 0.035; } /* -------------------------------------------------------------------------- Semantic tokens — LIGHT -------------------------------------------------------------------------- */ :root[data-theme='light'] { color-scheme: light; --bg: var(--paper-100); --bg-deep: var(--paper-200); --bg-elev: var(--paper-50); --surface: var(--paper-50); --surface-2: var(--paper-200); --surface-3: var(--paper-300); --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.95); --panel-bg: rgba(255, 255, 255, 0.99); --glass-border: rgba(11, 18, 32, 0.09); --glass-border-hover: rgba(2, 132, 199, 0.4); --glass-blur: 16px; --glass-blur-lg: 26px; --text: #0B1220; --text-strong: #05080F; --text-muted: #4A5B78; --text-dim: #7A8AA5; --text-on-primary: #FFFFFF; --border: rgba(11, 18, 32, 0.1); --border-strong: rgba(11, 18, 32, 0.18); --rule: rgba(11, 18, 32, 0.07); --primary: var(--sky-600); --primary-hover: var(--sky-700); --primary-deep: var(--cyan-600); --primary-soft: rgba(2, 132, 199, 0.09); --primary-soft-hover: rgba(2, 132, 199, 0.15); --accent: var(--amber-700); --accent-soft: rgba(180, 83, 9, 0.1); --success: var(--emerald-600); --danger: var(--rose-600); --glow-primary: 0 0 50px rgba(2, 132, 199, 0.16); --glow-soft: 0 0 80px rgba(2, 132, 199, 0.09); --aurora-1: rgba(2, 132, 199, 0.11); --aurora-2: rgba(6, 182, 212, 0.09); --aurora-3: rgba(180, 83, 9, 0.05); --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06); --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08); --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.12); --shadow-glass: 0 16px 48px rgba(11, 18, 32, 0.1); --grid-line: rgba(11, 18, 32, 0.04); --noise-opacity: 0.02; } /* Follow the system when the user has expressed no explicit preference. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: var(--paper-100); --bg-deep: var(--paper-200); --bg-elev: var(--paper-50); --surface: var(--paper-50); --surface-2: var(--paper-200); --surface-3: var(--paper-300); --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.95); --panel-bg: rgba(255, 255, 255, 0.99); --glass-border: rgba(11, 18, 32, 0.09); --glass-border-hover: rgba(2, 132, 199, 0.4); --text: #0B1220; --text-strong: #05080F; --text-muted: #4A5B78; --text-dim: #7A8AA5; --text-on-primary: #FFFFFF; --border: rgba(11, 18, 32, 0.1); --border-strong: rgba(11, 18, 32, 0.18); --rule: rgba(11, 18, 32, 0.07); --primary: var(--sky-600); --primary-hover: var(--sky-700); --primary-deep: var(--cyan-600); --primary-soft: rgba(2, 132, 199, 0.09); --primary-soft-hover: rgba(2, 132, 199, 0.15); --accent: var(--amber-700); --accent-soft: rgba(180, 83, 9, 0.1); --success: var(--emerald-600); --danger: var(--rose-600); --glow-primary: 0 0 50px rgba(2, 132, 199, 0.16); --glow-soft: 0 0 80px rgba(2, 132, 199, 0.09); --aurora-1: rgba(2, 132, 199, 0.11); --aurora-2: rgba(6, 182, 212, 0.09); --aurora-3: rgba(180, 83, 9, 0.05); --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06); --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08); --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.12); --shadow-glass: 0 16px 48px rgba(11, 18, 32, 0.1); --grid-line: rgba(11, 18, 32, 0.04); --noise-opacity: 0.02; } } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ :root { --font-display: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Fluid scale. Upper bounds are reached around 1440px and held beyond, so ultrawide screens get more whitespace rather than absurd type. */ --fs-display-xl: clamp(2.75rem, 1.6rem + 5.1vw, 6rem); --fs-display: clamp(2.25rem, 1.45rem + 3.6vw, 4.5rem); --fs-h1: clamp(2rem, 1.4rem + 2.7vw, 3.5rem); --fs-h2: clamp(1.625rem, 1.25rem + 1.7vw, 2.625rem); --fs-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem); --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-2xs: 0.6875rem; --fs-stat: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); --lh-tight: 1.04; --lh-heading: 1.14; --lh-snug: 1.35; --lh-body: 1.65; --ls-tighter: -0.035em; --ls-tight: -0.022em; --ls-normal: -0.011em; --ls-wide: 0.04em; --ls-label: 0.14em; --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; } /* -------------------------------------------------------------------------- Space, radius, motion, layout -------------------------------------------------------------------------- */ :root { --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; /* Section rhythm scales with viewport instead of stepping at breakpoints. */ --section-y: clamp(3.5rem, 2rem + 7vw, 8.5rem); --section-y-sm: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem); --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; --container: 1240px; --container-wide: 1480px; --container-narrow: 780px; /* Minimum raised from 1.15rem: ~19px left content sitting too close to the screen edge on phones. */ --gutter: clamp(1.35rem, 0.7rem + 2.5vw, 3rem); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 520ms; --dur-slower: 850ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --z-base: 1; --z-sticky: 40; --z-nav: 50; --z-mega: 60; --z-drawer: 70; --z-toast: 90; --nav-h: 72px; } @media (max-width: 900px) { :root { --nav-h: 64px; } }