/* ============================================================ LG STUDIO — DESIGN TOKENS Version 1.1 · August 2026 One brand. One shared core. Three expression modes. This file defines the LG Studio master identity and the direction for new work. Existing canonical product systems (StrategyIQ) and established surfaces (Insights) remain valid until intentionally migrated. Single source of truth. Do not inline these values elsewhere. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=Big+Shoulders+Display:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ══════════════════════════════════════════════════════════ 1 · COLOR · RAW PALETTE Fixed values. The vocabulary, not the usage. ══════════════════════════════════════════════════════════ */ --ink: #0F1111; /* Deep Ink — depth, focus, primary text */ --ivory: #F7F2E9; /* Warm Ivory — clarity, warmth, canvas */ --ivory-alt: #EFE8DB; /* Alt Ivory — subtle section shifts */ --ivory-deep: #E6DDCB; /* Deep Ivory — rare, panel edges */ --terracotta: #C96E53; /* Terracotta — human intervention, action */ --teal: #2F5D5A; /* Teal — signal, structure, precision */ /* Raw extensions for Ink-led composition */ --ink-raised: #1A1A1A; /* Ink, one step up — panels on dark */ --ink-card: #161818; /* Ink, card interior on dark */ /* ══════════════════════════════════════════════════════════ 2 · COLOR · SEMANTIC ROLES What the value is DOING. Reference these, not the raw values. ══════════════════════════════════════════════════════════ */ /* Accent roles — meaning, not decoration */ --accent-action: var(--terracotta); /* Human intervention · emphasis · authored decision */ --accent-signal: var(--teal); /* Signal · structure · system · analytical precision */ /* Text */ --text-primary: #0F1111; --text-secondary: #4A4744; --text-muted: #8A857E; --text-hairline: #C8BFAE; /* Text on Ink Surface */ --text-on-ink: #F7F2E9; --text-on-ink-muted: #A8A29A; /* Surfaces */ --surface-canvas: #F7F2E9; --surface-alt: #EFE8DB; --surface-card: #FFFCF6; --surface-ink: #0F1111; --surface-ink-alt: #1A1A1A; /* Hairlines */ --rule: #DDD3BF; --rule-strong: #0F1111; --rule-on-ink: #2E2E2E; /* ══════════════════════════════════════════════════════════ 3 · TYPOGRAPHY · SEMANTIC ROLES Four roles, not four brands. A role describes the JOB the type is doing. Modes may map a role to a different family. ══════════════════════════════════════════════════════════ */ --font-editorial: 'Fraunces', 'Times New Roman', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-structural: 'Big Shoulders Display', 'Big Shoulders', 'Inter Tight', 'Inter', sans-serif; --font-system: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* ── Backward-compatible aliases ─────────────────────────── Retained so existing selectors keep resolving. New work should reference the semantic role directly. --font-display → --font-editorial --font-label → --font-structural --font-mono → --font-system ───────────────────────────────────────────────────────── */ --font-display: var(--font-editorial); --font-label: var(--font-structural); --font-mono: var(--font-system); /* Structural type sets narrow. Micro labels need a weight lift. */ --fw-structural: 500; /* ══════════════════════════════════════════════════════════ 4 · TYPOGRAPHY · SCALE ══════════════════════════════════════════════════════════ */ --fs-display-xl: clamp(3.5rem, 6vw, 6rem); /* Cover / hero */ --fs-display-l: clamp(2.75rem, 4.5vw, 4.25rem); /* Section leads */ --fs-display-m: clamp(2rem, 3vw, 2.75rem); /* Article headings */ --fs-h1: 2.25rem; --fs-h2: 1.75rem; --fs-h3: 1.375rem; --fs-body-l: 1.125rem; /* Editorial lede */ --fs-body: 1rem; --fs-body-s: 0.9375rem; --fs-label: 0.8125rem; /* Structural eyebrows */ --fs-micro: 0.6875rem; /* ── LEADING & TRACKING ─────────────────────────────────── */ --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.55; --lh-loose: 1.7; --tr-eyebrow: 0.18em; /* Structural labels */ --tr-signature: 0.32em; /* READ / DIRECT / BUILD */ --tr-tight: -0.02em; /* Editorial serif */ --tr-body: -0.005em; /* ══════════════════════════════════════════════════════════ 5 · SPACING ══════════════════════════════════════════════════════════ */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px; --sp-7: 144px; /* ══════════════════════════════════════════════════════════ 6 · RADII ══════════════════════════════════════════════════════════ */ --r-none: 0; --r-xs: 2px; /* Editorial default — barely there */ --r-s: 4px; --r-m: 8px; --r-pill: 999px; /* ══════════════════════════════════════════════════════════ 7 · SHADOWS ══════════════════════════════════════════════════════════ */ --shadow-hairline: 0 0 0 1px var(--rule); --shadow-print: 0 1px 0 rgba(15,17,17,0.06); --shadow-soft: 0 12px 32px rgba(15,17,17,0.06); --shadow-lift: 0 24px 60px rgba(15,17,17,0.10); /* ══════════════════════════════════════════════════════════ 8 · MOTION ══════════════════════════════════════════════════════════ */ --ease-breath: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 180ms; --dur-hover: 240ms; --dur-section: 720ms; /* ══════════════════════════════════════════════════════════ 9 · LAYOUT ══════════════════════════════════════════════════════════ */ --measure-narrow: 44ch; --measure-read: 62ch; --measure-wide: 78ch; --container: 1240px; --container-tight: 960px; } /* ════════════════════════════════════════════════════════════ SURFACE SCOPES Paper and Ink are compositional tools inside one identity. Neither is "the brand." Neither is a light or dark theme. Apply data-surface="ink" to any section that should become Ink-led. Semantic tokens re-point; raw palette does not. ════════════════════════════════════════════════════════════ */ [data-surface="paper"] { --surface-canvas: #F7F2E9; --surface-alt: #EFE8DB; --surface-card: #FFFCF6; --text-primary: #0F1111; --text-secondary: #4A4744; --text-muted: #8A857E; --rule: #DDD3BF; --rule-strong: #0F1111; background: var(--surface-canvas); color: var(--text-primary); } [data-surface="ink"] { --surface-canvas: #0F1111; --surface-alt: #1A1A1A; --surface-card: #161818; --text-primary: #F7F2E9; --text-secondary: #A8A29A; --text-muted: #6F6A63; --rule: #2E2E2E; --rule-strong: #4A4744; background: var(--surface-canvas); color: var(--text-primary); } /* ── BASE RESETS ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); text-rendering: optimizeLegibility; } /* ── EDITORIAL TYPE PRIMITIVES ────────────────────────────── */ .display, .display-xl, .display-l, .display-m { font-family: var(--font-editorial); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--text-primary); } .display-xl { font-size: var(--fs-display-xl); } .display-l { font-size: var(--fs-display-l); } .display-m { font-size: var(--fs-display-m); } /* ── STRUCTURAL TYPE PRIMITIVES ───────────────────────────── */ .eyebrow { font-family: var(--font-structural); font-weight: var(--fw-structural); font-size: var(--fs-label); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-muted); } .signature { font-family: var(--font-structural); font-weight: var(--fw-structural); letter-spacing: var(--tr-signature); text-transform: uppercase; } /* ── SYSTEM TYPE PRIMITIVE ────────────────────────────────── */ .system-meta { font-family: var(--font-system); font-size: var(--fs-micro); letter-spacing: 0.02em; color: var(--text-muted); } .lede { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--text-secondary); max-width: var(--measure-read); } hr.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-4) 0; } hr.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); margin: var(--sp-4) 0; } /* ── REDUCED MOTION ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }