/* SORVO design tokens — the single source of truth for the override layer. * * This is the ONLY file in mirror-source/brand/ that may declare :root. * Before phase 10 there were five competing blocks (sorvo-theme.css at lines * 45, 450 and 1583, sorvo-foundation.css, sorvo-projects.css) with three * different names for the same ink colour and two different values for * --fs-2xl / --fs-3xl. Because projects.css loaded last, its type ladder * silently redefined every theme rule that referenced those steps — correct * in effect, invisible in the source. scripts/verify-mirror.mjs now fails the * build if a second :root reappears. * * Load order: Nuxt entry CSS -> THIS -> theme -> foundation -> projects, * then Nuxt appends every route CSS chunk during hydration. That last step is * why the layers below need !important. See ARCHITECTURE.md. */ :root { /* ---------------------------------------------------------- brand palette Values come from SORVO_Brand_Assets_v1.0. Phase 10 retired the two off-brand blues that had accumulated: #2251e5 (foundation, 7 sites) and #2251ff (theme, declared and never used). */ --sorvo-navy: #0a1020; --sorvo-cobalt: #2563ff; --sorvo-mint: #00e0b4; --sorvo-white: #ffffff; /* Channel forms of the three brand colours, for translucent stops. rgb(var(--sorvo-cobalt-rgb) / 28%) keeps a gradient tied to the brand value instead of repeating "37, 99, 255" at every stop. */ --sorvo-navy-rgb: 10 16 32; --sorvo-cobalt-rgb: 37 99 255; --sorvo-mint-rgb: 0 224 180; --sorvo-font: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ------------------------------------------------------------------- ink Ten near-identical greys across the three layers collapse into three tiers. Measured on #fff: 12.6 : 1 / 7.4 : 1 / 4.9 : 1. Retired aliases: --sorvo-readable-ink/-muted/-soft (theme), --sorvo-text/--sorvo-muted (foundation). */ --sorvo-ink: #17243e; --sorvo-ink-muted: #465572; --sorvo-ink-soft: #5b6a80; /* --------------------------------------------------------------- accents One section-label colour for the whole site. The pale blue-violets the Nuxt build uses (#4364ed #4a67ee #5a77eb #5c73eb #5d84f5) measure 3.98-4.35 on the page's light surfaces and #147b80 measured 4.22-4.37; this is 5.98 on #f7f8fb and 6.3 on #fff. --sorvo-cobalt-on-dark clears 4.5 : 1 on --sorvo-navy (5.77 : 1) where the brand cobalt only reaches 3.89 : 1. */ --sorvo-teal: #0f6a6e; /* The cobalt triplet, one per surface: --sorvo-cobalt fills and large blocks --sorvo-cobalt-ink blue text on a light surface (8.3 : 1 on #fff; the brand cobalt only reaches 4.9 : 1 there) --sorvo-cobalt-on-dark text on --sorvo-navy (5.8 : 1; brand cobalt 3.9) Phase 10 folded #1741bd / #173b9e / #334b72 into --sorvo-cobalt-ink; they measured 8.31 / 9.74 / 8.79 on white and read as the same blue. */ --sorvo-cobalt-ink: #1741bd; --sorvo-cobalt-on-dark: #5b8cff; /* -------------------------------------------------------------- surfaces */ --sorvo-surface: #ffffff; --sorvo-surface-alt: #f4f7fb; --sorvo-border: #e1e8f0; --sorvo-border-strong: #cbd5e4; /* edges on interactive controls */ /* -------------------------------------------------- simple-suite art set A separate palette used only by the phase 4 simple-suite sections. */ --sorvo-simple-ink: #071033; --sorvo-simple-line: rgb(7 16 51 / 11%); --sorvo-simple-shadow: 0 18px 42px rgb(10 16 32 / 8%); /* ------------------------------------------------------------ type ladder Eleven steps. Everything upstream maps into one of these: the 13 / 15 / 17 / 19 / 25.2 / 26 / 29 / 30 / 40 / 50 / 52 / 70 / 86 px that phases 7 and 8 added, and the six near-duplicates in the 24-32 px cluster. */ --fs-xs: 12px; /* micro labels */ --fs-sm: 14px; /* captions, meta, tags */ --fs-base: 16px; /* body */ --fs-lead: 18px; /* section intro paragraph */ --fs-md: 20px; /* small card title */ --fs-h3: 22px; /* h3 / card title */ --fs-lg: 24px; /* large card title */ --fs-xl: 32px; /* small section title */ --fs-2xl: clamp(32px, 3.2vw, 42px); /* section title */ --fs-3xl: clamp(40px, 4.4vw, 60px); /* page h1 */ --fs-4xl: clamp(44px, 4.8vw, 64px); /* hero and closing CTA */ /* --------------------------------------------------------------- weights 200 / 270 / 275 / 300 are deliberately absent: no face ships them, so the browser synthesises, and hairline weights are not legible for CJK. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ----------------------------------------------------------------- radii 6.4px and 7px upstream both collapse into --r-sm. Phase 10 folded foundation's 10 / 12 / 16 / 24 px into this ladder. */ --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-xl: 28px; --r-2xl: 32px; --r-pill: 999px; /* --------------------------------------------------------- spacing, 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ------------------------------------------------------ elevation, 3 steps */ --sh-card: 0 2px 12px rgba(10, 16, 32, 0.06); --sh-raised: 0 10px 30px rgba(10, 16, 32, 0.1); --sh-overlay: 0 24px 60px rgba(10, 16, 32, 0.18); /* ---------------------------------------------------------------- scrims Text set over photography uses these so legibility stops depending on where the image happens to crop. */ --scrim-light: linear-gradient( 180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0) 100% ); --scrim-dark: linear-gradient( 180deg, rgba(6, 12, 28, 0.72) 0%, rgba(6, 12, 28, 0.52) 55%, rgba(6, 12, 28, 0) 100% ); /* ----------------------------------------------------------- interaction */ --tap-min: 44px; }