/* ============================================ Prasad Gupte Design System — Tokens Single source of truth for all visual properties. No framework dependencies — works in any CSS context. Repo: github.com/prasadgupte/pg-design-system ============================================ */ :root { /* === COLORS: LIGHT MODE === */ /* Surfaces ────────────────────────────────────────────────────────────────── Two flavours of "dark surface": --bg-inverse inverts with the page background. Light theme → dark; dark theme → light. Use for "the opposite of the page" affordances (e.g. inline reverse callouts, light-on-dark badges on a light page). --surface-ink permanent ink. Stays dark in every theme. Use this for editorial "always-dark" sections (OS pillars band, featured tile, crucible block, photo backdrops) where white-on-dark content must remain readable when the page is dark. Picking the wrong one is the most common theme bug: components that want "always dark" but reach for --bg-inverse turn white in dark mode, making their white text unreadable. ────────────────────────────────────────────────────────────── */ --bg-primary: #FAFAFA; --bg-elevated: #F8F7FF; --bg-subtle: #F0EEF8; --bg-inverse: #15131F; --surface-ink: #15131F; /* Borders */ --border-default: #E9E5F5; --border-strong: #D4D0E8; --border-focus: #6C5CE7; /* Text */ --text-primary: #2D2A3E; --text-secondary: #6E6A82; --text-tertiary: #9B97B0; --text-heading: #15131F; --text-inverse: #FAFAFA; /* Accent: Violet — Primary / Electric / Transformation */ --accent-violet: #6C5CE7; --accent-violet-light: #A29BFE; --accent-violet-text: #5A4BD4; --accent-violet-bg: rgba(108, 92, 231, 0.08); /* Accent: Coral — Product / ∞ Infinity */ /* Editorial coral is the default base. Use --accent-coral-bright for slide-background contexts (mesh, aurora-coral, map arcs, page-hero gradients) where the original candy energy is intentional. */ --accent-coral: #E04E4E; --accent-coral-light: #F08778; --accent-coral-text: #B83333; --accent-coral-bg: rgba(224, 78, 78, 0.08); --accent-coral-bright: #FF6B6B; /* candy — slide backgrounds only */ /* Accent: Mint — Leadership / ⌘ Command */ --accent-mint: #00D2A0; --accent-mint-light: #55EFC4; --accent-mint-text: #008C6B; --accent-mint-bg: rgba(0, 210, 160, 0.08); /* Accent: Amber — PG meta / ⋈ Bowtie */ --accent-amber: #FDCB6E; --accent-amber-light: #FFEAA7; --accent-amber-text: #B8922A; --accent-amber-bg: rgba(253, 203, 110, 0.08); /* Accent: Sky — Exploration */ --accent-sky: #0EA5E9; --accent-sky-light: #38BDF8; --accent-sky-text: #0284C7; --accent-sky-bg: rgba(14, 165, 233, 0.08); /* Accent: Crimson — Tension / Contrast */ --accent-crimson: #C41E3A; --accent-crimson-light: #E8334F; --accent-crimson-text: #C41E3A; --accent-crimson-bg: rgba(196, 30, 58, 0.08); /* World map — country state tokens (scheme B: violet visited · sky lived · amber focused · mint pins) Consumed by: design-preview.html §MAP, travel-diary trip-map Override per-project by redefining --map-* on a scoped selector. */ --map-sea: #ECEAF8; --map-land: #F4F2FC; --map-bd: rgba(108,92,231,0.15); --map-visited-bd: rgba(108,92,231,0.60); /* consistent border for all visited tiers */ --map-v1: rgba(108,92,231,0.12); --map-v1-bd: rgba(108,92,231,0.60); /* visited 1–2× */ --map-v2: rgba(108,92,231,0.24); --map-v2-bd: rgba(108,92,231,0.60); /* visited 3–10× */ --map-v3: rgba(108,92,231,0.42); --map-v3-bd: rgba(108,92,231,0.80); /* visited 10+× */ --map-transit: rgba(108,92,231,0.06); --map-transit-bd: rgba(108,92,231,0.45); /* transit-only (dashed border) */ --map-lived: rgba(14,165,233,0.28); --map-lived-bd: rgba(14,165,233,0.65); /* sky */ --map-focused: rgba(253,203,110,0.90); --map-focused-bd: #FDCB6E; /* amber */ --map-arc: rgba(255,107,107,0.50); --map-pin: #00B894; /* Semantic aliases */ --link: var(--accent-violet-text); --link-hover: var(--accent-violet); --button-primary-bg: var(--accent-violet); --button-primary-text: #FFFFFF; --button-secondary-bg: transparent; --button-secondary-border: var(--border-strong); --button-secondary-text: var(--text-primary); --button-ghost-text: var(--accent-violet-text); /* Gradients */ --gradient-brand: linear-gradient(90deg, #6C5CE7, #E04E4E, #00D2A0, #FDCB6E); --gradient-aurora-violet: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 40%, #55EFC4 100%); --gradient-aurora-mint: linear-gradient(135deg, #00D2A0 0%, #55EFC4 40%, #A29BFE 100%); --gradient-aurora-coral: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 40%, #FDCB6E 100%); --gradient-aurora-amber: linear-gradient(135deg, #FDCB6E 0%, #FFEAA7 40%, #FF8E8E 100%); --gradient-mark: linear-gradient(45deg, #C41E3A 0%, #C41E3A 12%, #6C5CE7 50%, #00D2A0 75%, #00D2A0 88%, #D4AF37 100%); /* Editorial & premium */ --font-serif: 'Playfair Display', Georgia, serif; --font-editorial: 'Newsreader', Georgia, serif; /* Dark surface enrichment */ --dark-inner: radial-gradient(ellipse at 30% 0%, #2A2640 0%, #1E1B2E 70%); --dark-highlight: inset 0 1px 0 rgba(255,255,255,0.06); /* Brand mark glow */ --glow-brand: drop-shadow(0 0 22px rgba(108,92,231,0.55)); /* === TYPOGRAPHY === */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale (Major Third 1.25, 16px base) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 5rem; /* 80px — section title, close heading */ --text-9xl: 7.5rem; /* 120px — intro mark */ --text-10xl: 12.5rem; /* 200px — hero stat number */ --text-11xl: 20rem; /* 320px — ghost section number */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 2; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-tighter: -0.04em; /* hero stats, 200px+ display */ --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* === SPACING (4px base grid) === */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Card padding — single source of truth; use in all card variants */ --card-pad: var(--space-8); /* 32px — default card */ --card-pad-compact: var(--space-6); /* 24px — compact / mobile */ /* Slide canvas spacing (presentation scale, not 4px UI grid) */ --slide-pad-sm: 3rem; /* 48px */ --slide-pad-md: 4.5rem; /* 72px */ --slide-pad-lg: 6.25rem; /* 100px */ --slide-pad-xl: 8.75rem; /* 140px */ /* Content widths */ --w-content: 680px; --w-wide: 960px; --w-max: 1200px; /* Tailwind v4 aliases (Astro site uses --width-* prefix) */ --width-content: 680px; --width-wide: 960px; --width-max: 1200px; /* === RADII === */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(21, 19, 31, 0.04); --shadow-md: 0 4px 12px rgba(21, 19, 31, 0.06); --shadow-lg: 0 8px 24px rgba(21, 19, 31, 0.08); --shadow-xl: 0 16px 48px rgba(21, 19, 31, 0.10); --shadow-hover: 0 8px 24px rgba(108, 92, 231, 0.12); /* === OVERLAY TEXT (on colored fills) === */ /* For labels rendered on top of arbitrary brand-color fills: stacked-bar segments, photo captions, ribbons, badges-on-image, etc. Same values in light + dark themes — brand fills don't theme-shift. Strategy: white text + multi-stop dark halo. The tight 1px ring gives a micro-stroke that pulls text off light fills (amber #FDCB6E); the softer 3px falloff anchors it on mid/dark fills. */ --overlay-text: #FFFFFF; --overlay-text-soft: rgba(255, 255, 255, 0.92); --overlay-text-shadow: 0 0 1px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45); /* Inverted: dark text + light halo, for the rare case where a pale fill is paired with a label that must stay dark (e.g. on-brand mint/amber tags where the brand reads as "warm light"). */ --overlay-text-dark: #15131F; --overlay-text-shadow-light: 0 0 1px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(255, 255, 255, 0.45); /* === MOTION === */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --stagger-delay: 75ms; --reveal-distance: 20px; /* White-on-dark alpha scale (for rgba(255,255,255, var(--alpha-*))) */ --alpha-faint: 0.04; /* bg surfaces, faint borders */ --alpha-subtle: 0.12; /* borders, watermarks, dividers */ --alpha-muted: 0.35; /* secondary labels, counters */ --alpha-medium: 0.55; /* subheads, body secondary */ --alpha-strong: 0.75; /* body text on dark */ --alpha-intense: 0.85; /* primary body on dark */ /* === SLIDE BACKGROUNDS (from brand book v3 §02) === */ /* Six named backgrounds. Choose one per deck, stay consistent. */ --slide-bg-electric-wash: linear-gradient(135deg, #6C5CE7 0%, #3D35A0 30%, #15131F 100%); --slide-bg-mint-shift: linear-gradient(160deg, #15131F 0%, #0D2F2B 60%, #143D38 100%); --slide-bg-aurora: linear-gradient(160deg, #15131F 0%, #2D2560 35%, #1E3A5F 65%, #0D4A3B 100%); --slide-bg-deep-ink: #15131F; --slide-bg-mesh-electric: radial-gradient(ellipse at 25% 25%, rgba(108,92,231,0.2) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, rgba(255,107,107,0.15) 0%, transparent 45%), #15131F; --slide-bg-warm-light: #F8F7FF; --slide-bg-cool-light: linear-gradient(160deg, #F5F3FF 0%, #EDFAF6 100%); --slide-bg-coral-tinted: linear-gradient(170deg, #F3ECEE 0%, #F0EAEB 100%); /* === COLOUR PAIRINGS (from brand book v3 §02) === */ /* Use 1–2 accents per composition. Ink is always the anchor. */ --pair-ink-electric-bg: var(--bg-inverse); --pair-ink-electric-text: var(--accent-violet-light); --pair-ink-coral-bg: var(--bg-inverse); --pair-ink-coral-text: #FF8E8E; --pair-light-electric-bg: var(--bg-elevated); --pair-light-electric-text: var(--accent-violet); /* === SHAPE LANGUAGE (from brand book v3 §03) === */ /* Glyph marks — typographic characters as visual energy, not content. Deploy at 8–22% opacity, right half of canvas or as watermarks. */ --glyph-chevron: '\203A'; /* › momentum */ --glyph-arrow: '\2197'; /* ↗ direction */ --glyph-spark: '\2726'; /* ✦ energy */ /* Signature marks — four ownable Unicode symbols. One per deck, never mix. */ --mark-bowtie: '\22C8'; /* ⋈ synthesis — amber */ --mark-command: '\2318'; /* ⌘ focus — mint */ --mark-delta: '\0394'; /* Δ change — violet */ --mark-infinity: '\221E'; /* ∞ compounding — coral */ } /* === DARK MODE (system preference) === */ /* Applies when OS is in dark mode and no .light class overrides. :not(:has(body.light)) suppresses this block for dark-first apps that use the body.light toggle convention (e.g. tokens-dark-ui.css). */ @media (prefers-color-scheme: dark) { :root:not(.light):not(:has(body.light)) { --bg-primary: #100D1B; --bg-elevated: #1B1828; --bg-subtle: #251F3A; --bg-inverse: #FAFAFA; /* --surface-ink stays dark; lifted one notch above the page bg so always-dark sections still register as elevated, not absorbed. */ --surface-ink: #1B1828; --border-default: #332F4A; --border-strong: #3D3860; --border-focus: #A29BFE; --text-primary: #E0DDF0; --text-secondary: #9B97B0; --text-tertiary: #8A869E; --text-heading: #FAFAFA; --text-inverse: #100D1B; --accent-violet: #A29BFE; --accent-violet-light: #C4BFFE; --accent-violet-text: #A29BFE; --accent-violet-bg: rgba(162, 155, 254, 0.12); --accent-coral: #F08778; --accent-coral-light: #F4A395; --accent-coral-text: #F08778; --accent-coral-bg: rgba(240, 135, 120, 0.12); --accent-coral-bright: #FF8E8E; /* candy on dark */ --accent-mint: #55EFC4; --accent-mint-light: #7FF5D5; --accent-mint-text: #55EFC4; --accent-mint-bg: rgba(85, 239, 196, 0.12); --accent-amber: #E5C977; --accent-amber-light: #F4DD9B; --accent-amber-text: #E5C977; --accent-amber-bg: rgba(229, 201, 119, 0.12); --accent-sky: #38BDF8; --accent-sky-light: #7DD3FC; --accent-sky-text: #38BDF8; --accent-sky-bg: rgba(56, 189, 248, 0.12); --accent-crimson: #E8334F; --accent-crimson-light: #F06070; --accent-crimson-text: #E8334F; --accent-crimson-bg: rgba(232, 51, 79, 0.12); --link: var(--accent-violet-text); --link-hover: var(--accent-violet-light); --button-primary-bg: var(--accent-violet); --button-primary-text: #100D1B; --button-secondary-border: var(--border-strong); --button-secondary-text: var(--text-primary); --button-ghost-text: var(--accent-violet-text); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.30); --shadow-hover: 0 8px 24px rgba(162, 155, 254, 0.15); --map-sea: #100E1D; --map-land: #211E35; --map-bd: rgba(108,92,231,0.10); --map-visited-bd: rgba(162,155,254,0.55); --map-v1: rgba(108,92,231,0.16); --map-v1-bd: rgba(162,155,254,0.55); --map-v2: rgba(108,92,231,0.32); --map-v2-bd: rgba(162,155,254,0.55); --map-v3: rgba(108,92,231,0.54); --map-v3-bd: rgba(162,155,254,0.80); --map-transit: rgba(162,155,254,0.08); --map-transit-bd: rgba(162,155,254,0.40); --map-lived: rgba(14,165,233,0.35); --map-lived-bd: rgba(14,165,233,0.82); --map-focused: rgba(253,203,110,0.58); --map-focused-bd: rgba(253,203,110,0.75); --map-arc: rgba(255,107,107,0.55); --map-pin: #00D2A0; } } /* Dark mode via manual toggle (.dark class on or ) */ .dark { --bg-primary: #100D1B; --bg-elevated: #1B1828; --bg-subtle: #251F3A; --bg-inverse: #FAFAFA; /* --surface-ink stays dark; lifted one notch above the page bg so always-dark sections still register as elevated, not absorbed. */ --surface-ink: #1B1828; --border-default: #332F4A; --border-strong: #3D3860; --border-focus: #A29BFE; --text-primary: #E0DDF0; --text-secondary: #9B97B0; --text-tertiary: #8A869E; --text-heading: #FAFAFA; --text-inverse: #100D1B; --accent-violet: #A29BFE; --accent-violet-light: #C4BFFE; --accent-violet-text: #A29BFE; --accent-violet-bg: rgba(162, 155, 254, 0.12); --accent-coral: #F08778; --accent-coral-light: #F4A395; --accent-coral-text: #F08778; --accent-coral-bg: rgba(240, 135, 120, 0.12); --accent-coral-bright: #FF8E8E; /* candy on dark */ --accent-mint: #55EFC4; --accent-mint-light: #7FF5D5; --accent-mint-text: #55EFC4; --accent-mint-bg: rgba(85, 239, 196, 0.12); --accent-amber: #E5C977; --accent-amber-light: #F4DD9B; --accent-amber-text: #E5C977; --accent-amber-bg: rgba(229, 201, 119, 0.12); --accent-sky: #38BDF8; --accent-sky-light: #7DD3FC; --accent-sky-text: #38BDF8; --accent-sky-bg: rgba(56, 189, 248, 0.12); --accent-crimson: #E8334F; --accent-crimson-light: #F06070; --accent-crimson-text: #E8334F; --accent-crimson-bg: rgba(232, 51, 79, 0.12); --link: var(--accent-violet-text); --link-hover: var(--accent-violet-light); --button-primary-bg: var(--accent-violet); --button-primary-text: #15131F; --button-secondary-border: var(--border-strong); --button-secondary-text: var(--text-primary); --button-ghost-text: var(--accent-violet-text); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.30); --shadow-hover: 0 8px 24px rgba(162, 155, 254, 0.15); --map-sea: #100E1D; --map-land: #211E35; --map-bd: rgba(108,92,231,0.10); --map-visited-bd: rgba(162,155,254,0.55); --map-v1: rgba(108,92,231,0.16); --map-v1-bd: rgba(162,155,254,0.55); --map-v2: rgba(108,92,231,0.32); --map-v2-bd: rgba(162,155,254,0.55); --map-v3: rgba(108,92,231,0.54); --map-v3-bd: rgba(162,155,254,0.80); --map-transit: rgba(162,155,254,0.08); --map-transit-bd: rgba(162,155,254,0.40); --map-lived: rgba(14,165,233,0.35); --map-lived-bd: rgba(14,165,233,0.82); --map-focused: rgba(253,203,110,0.58); --map-focused-bd: rgba(253,203,110,0.75); --map-arc: rgba(255,107,107,0.55); --map-pin: #00D2A0; } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --reveal-distance: 0px; } }