/* ========================================================================== Novametris — Design tokens & themes Light (default) and Blueprint (dark, IDE-like) themes. Switched by setting `data-theme` on . ========================================================================== */ :root, [data-theme="light"] { --bg: #F5F5F5; --bg-alt: #D6E6F2; --surface: #FFFFFF; --surface-2: #FAFAFA; --ink: #303841; --ink-soft: #5A6470; --ink-faint: #9AA4AF; --border: rgba(48, 56, 65, .10); --border-soft: rgba(48, 56, 65, .06); --accent: #deff00; --accent-ink: #303841; /* text colour on yellow */ --accent-soft: rgba(222, 255, 0, .18); /* Readable accent for body text on light backgrounds — preserves the brand hue but raises contrast to AA on white. Use --accent for fills, hovers and borders; use --accent-text where the colour stands alone as text. */ --accent-text: #6F7F00; --grid: rgba(48, 56, 65, .05); --shadow-sm: 0 1px 2px rgba(48, 56, 65, .06), 0 2px 8px rgba(48, 56, 65, .05); --shadow-md: 0 8px 24px rgba(48, 56, 65, .08), 0 2px 6px rgba(48, 56, 65, .05); --shadow-lg: 0 24px 60px rgba(48, 56, 65, .14); --scrim: rgba(48, 56, 65, .55); --particle: #303841; } [data-theme="blueprint"] { --bg: #12161A; --bg-alt: #1A2028; --surface: #1E252E; --surface-2: #232B36; --ink: #E8F0F8; --ink-soft: #A0ADBC; --ink-faint: #6A7684; --border: rgba(222, 255, 0, .14); --border-soft: rgba(222, 255, 0, .06); --accent: #deff00; --accent-ink: #12161A; --accent-soft: rgba(222, 255, 0, .10); --accent-text: #deff00; --grid: rgba(222, 255, 0, .06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .70); --particle: #deff00; } /* Global size & motion tokens — shared across themes */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-head: "Space Grotesk", "Inter", system-ui, sans-serif; --font-mono: "Space Grotesk", ui-monospace, Menlo, Consolas, monospace; --step-0: clamp(.88rem, .82rem + .25vw, 1rem); --step-1: clamp(1rem, .92rem + .4vw, 1.18rem); --step-2: clamp(1.18rem, 1.04rem + .7vw, 1.5rem); --step-3: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); --step-4: clamp(2rem, 1.5rem + 2.3vw, 3rem); --step-5: clamp(2.6rem, 1.9rem + 3.5vw, 4.6rem); --step-6: clamp(3rem, 2.2rem + 4.5vw, 6rem); --container: min(1240px, 92vw); --container-wide: min(1440px, 96vw); --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.6, 0, .2, 1); --dur-fast: .18s; --dur-med: .35s; --dur-slow: .7s; } /* Blueprint-only: faint contour-line background over main surfaces */ [data-theme="blueprint"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("../assets/topography-dark.svg"); background-size: 800px 800px; mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); }