/* ============================================================ 1000PDF DESIGN SYSTEM — TOKENS ------------------------------------------------------------ Three layers: 1. Brand palette (literal hex values, never change) 2. Theme-independent (typography, spacing, radii, motion) 3. Theme-dependent (surfaces, text, borders, shadows) — dark is default (:root) — light is [data-theme="light"] Switch theme by setting data-theme on : or ============================================================ */ :root { /* ===== LAYER 1: BRAND PALETTE (literal) =================== Shared with Codeless Dev. NEVER changes between themes. */ --pdf-gold: #FDB531; --pdf-gold-warm: #BC9446; --pdf-gold-soft: #F5D78A; --pdf-gold-deep: #8B6620; --pdf-blue: #4380C2; --pdf-blue-deep: #1F4476; --pdf-blue-electric: #5BA1E8; --pdf-navy: #020026; --pdf-navy-rich: #0A0833; --pdf-navy-soft: #15124a; --pdf-paper: #F8F7F2; --pdf-paper-warm: #F2EFE3; --pdf-white: #FFFFFF; /* Semantic / status colors — same in both themes */ --pdf-success: #3CCB7F; --pdf-warning: #FDB531; --pdf-danger: #E25822; --pdf-info: #5BA1E8; /* ===== LAYER 2: THEME-INDEPENDENT TOKENS ================== */ /* Typography */ --pdf-font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --pdf-font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; --pdf-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --pdf-text-xs: 0.75rem; /* 12 */ --pdf-text-sm: 0.875rem; /* 14 */ --pdf-text-base: 1rem; /* 16 */ --pdf-text-md: 1.125rem; /* 18 */ --pdf-text-lg: 1.25rem; /* 20 */ --pdf-text-xl: 1.5rem; /* 24 */ --pdf-text-2xl: 1.875rem; /* 30 */ --pdf-text-3xl: 2.25rem; /* 36 */ --pdf-text-4xl: 3rem; /* 48 */ --pdf-text-5xl: 4rem; /* 64 */ --pdf-text-6xl: 5.5rem; /* 88 */ --pdf-text-7xl: 7.5rem; /* 120 */ --pdf-leading-tight: 1.05; --pdf-leading-snug: 1.2; --pdf-leading-normal: 1.5; --pdf-leading-relaxed: 1.7; --pdf-tracking-tighter: -0.04em; --pdf-tracking-tight: -0.02em; --pdf-tracking-normal: 0; --pdf-tracking-wide: 0.04em; --pdf-tracking-wider: 0.08em; --pdf-tracking-widest: 0.15em; --pdf-weight-regular: 400; --pdf-weight-medium: 500; --pdf-weight-semibold: 600; --pdf-weight-bold: 700; /* Spacing — 8pt grid */ --pdf-space-px: 1px; --pdf-space-0-5: 0.125rem; --pdf-space-1: 0.25rem; --pdf-space-2: 0.5rem; --pdf-space-3: 0.75rem; --pdf-space-4: 1rem; --pdf-space-5: 1.25rem; --pdf-space-6: 1.5rem; --pdf-space-8: 2rem; --pdf-space-10: 2.5rem; --pdf-space-12: 3rem; --pdf-space-16: 4rem; --pdf-space-20: 5rem; --pdf-space-24: 6rem; --pdf-space-32: 8rem; --pdf-space-40: 10rem; /* Radii */ --pdf-radius-none: 0; --pdf-radius-xs: 2px; --pdf-radius-sm: 4px; --pdf-radius-md: 8px; --pdf-radius-lg: 12px; --pdf-radius-xl: 20px; --pdf-radius-2xl: 28px; --pdf-radius-full: 9999px; /* Motion */ --pdf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --pdf-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --pdf-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); --pdf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --pdf-duration-instant: 80ms; --pdf-duration-fast: 160ms; --pdf-duration-base: 240ms; --pdf-duration-slow: 400ms; --pdf-duration-slower: 700ms; /* Z-index */ --pdf-z-base: 1; --pdf-z-sticky: 100; --pdf-z-overlay: 1000; --pdf-z-modal: 1100; --pdf-z-tooltip: 1200; /* Layout constants */ --pdf-container-max: 1280px; --pdf-container-wide: 1440px; --pdf-container-narrow: 880px; /* Always-the-same gradients (mode-independent) */ --pdf-gradient-gold: linear-gradient(135deg, #FDB531 0%, #BC9446 100%); --pdf-gradient-codelessdev: linear-gradient(135deg, #1F4476 0%, #020026 50%, #BC9446 150%); /* Theme transition timing — used by body so theme switch is smooth */ --pdf-theme-transition: background-color var(--pdf-duration-slow) var(--pdf-ease-out), color var(--pdf-duration-slow) var(--pdf-ease-out); } /* ============================================================ LAYER 3a: DARK THEME (default) ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces — tuned to the logo's blue axis (was purple-navy) */ --pdf-surface-0: #020026; --pdf-surface-1: #081134; --pdf-surface-2: #112349; --pdf-surface-3: #1C3A66; /* Text */ --pdf-text-primary: #FFFFFF; --pdf-text-secondary: rgba(255, 255, 255, 0.72); --pdf-text-muted: rgba(255, 255, 255, 0.55); --pdf-text-faint: rgba(255, 255, 255, 0.40); --pdf-text-inverse: var(--pdf-navy); /* Borders & lines */ --pdf-surface-line: rgba(253, 181, 49, 0.16); --pdf-surface-line-strong: rgba(253, 181, 49, 0.38); --pdf-surface-line-cool: rgba(255, 255, 255, 0.08); /* Glass / atmospheric */ --pdf-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); --pdf-glass-border: rgba(255, 255, 255, 0.08); --pdf-nav-bg: rgba(2, 0, 38, 0.72); /* Shadows */ --pdf-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --pdf-shadow-card: 0 1px 0 rgba(253, 181, 49, 0.08) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.5); --pdf-shadow-elevated: 0 20px 60px -20px rgba(0, 0, 0, 0.65); --pdf-shadow-glow-gold: 0 0 36px rgba(253, 181, 49, 0.30); --pdf-shadow-glow-blue: 0 0 36px rgba(67, 128, 194, 0.26); --pdf-shadow-btn-gold: 0 12px 32px -12px rgba(253, 181, 49, 0.55); --pdf-shadow-btn-gold-hi: 0 20px 48px -16px rgba(253, 181, 49, 0.70); /* Backgrounds — page-level */ --pdf-canvas: radial-gradient(130% 105% at 50% -15%, #1F4476 0%, #0A1A40 38%, #020026 78%); --pdf-gradient-mesh: radial-gradient(55% 70% at 82% 12%, rgba(253, 181, 49, 0.16), transparent 62%), radial-gradient(58% 66% at 12% 88%, rgba(67, 128, 194, 0.18), transparent 62%); --pdf-gradient-gold-soft: linear-gradient(135deg, rgba(253, 181, 49, 0.18) 0%, rgba(188, 148, 70, 0.04) 100%); --pdf-dot-color: rgba(253, 181, 49, 0.11); /* Scrollbar */ --pdf-scrollbar-track: #020026; --pdf-scrollbar-thumb: #1F1A5F; --pdf-scrollbar-hover: var(--pdf-gold-warm); /* Hover-fill tints */ --pdf-hover-fill: rgba(253, 181, 49, 0.11); --pdf-hover-fill-cool: rgba(255, 255, 255, 0.06); /* Tab/Form */ --pdf-input-bg: rgba(255, 255, 255, 0.04); --pdf-input-border: rgba(255, 255, 255, 0.10); } /* ============================================================ LAYER 3b: LIGHT THEME ------------------------------------------------------------ Editorial-light: warm off-white paper, near-black navy text, restrained gold accents, navy-tinted hairlines (gold-tinted would be invisible on cream). ============================================================ */ [data-theme="light"] { color-scheme: light; /* Surfaces — warm paper white */ --pdf-surface-0: #F8F7F2; --pdf-surface-1: #FFFFFF; --pdf-surface-2: #FAFAF4; --pdf-surface-3: #F2EFE3; /* Text — deep navy for serious editorial feel */ --pdf-text-primary: #0A0833; --pdf-text-secondary: rgba(10, 8, 51, 0.78); --pdf-text-muted: rgba(10, 8, 51, 0.60); --pdf-text-faint: rgba(10, 8, 51, 0.42); --pdf-text-inverse: var(--pdf-white); /* Borders & lines — navy-tinted (gold-tinted disappears on light) */ --pdf-surface-line: rgba(10, 8, 51, 0.10); --pdf-surface-line-strong: rgba(10, 8, 51, 0.22); --pdf-surface-line-cool: rgba(10, 8, 51, 0.08); /* Glass / atmospheric */ --pdf-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)); --pdf-glass-border: rgba(10, 8, 51, 0.10); --pdf-nav-bg: rgba(248, 247, 242, 0.82); /* Shadows — soft, plausible on paper */ --pdf-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5); --pdf-shadow-card: 0 1px 2px rgba(10, 8, 51, 0.04), 0 12px 32px -16px rgba(10, 8, 51, 0.15); --pdf-shadow-elevated: 0 24px 48px -18px rgba(10, 8, 51, 0.18); --pdf-shadow-glow-gold: 0 0 36px rgba(253, 181, 49, 0.30); --pdf-shadow-glow-blue: 0 0 36px rgba(67, 128, 194, 0.22); --pdf-shadow-btn-gold: 0 12px 28px -12px rgba(253, 181, 49, 0.45), 0 4px 12px -4px rgba(10, 8, 51, 0.08); --pdf-shadow-btn-gold-hi: 0 20px 40px -14px rgba(253, 181, 49, 0.55), 0 6px 16px -4px rgba(10, 8, 51, 0.10); /* Backgrounds — page-level */ --pdf-canvas: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F8F7F2 60%, #F2EFE3 100%); --pdf-gradient-mesh: radial-gradient(55% 70% at 82% 12%, rgba(253, 181, 49, 0.18), transparent 62%), radial-gradient(58% 66% at 12% 88%, rgba(67, 128, 194, 0.14), transparent 62%); --pdf-gradient-gold-soft: linear-gradient(135deg, rgba(253, 181, 49, 0.18) 0%, rgba(188, 148, 70, 0.04) 100%); --pdf-dot-color: rgba(31, 68, 118, 0.12); /* Scrollbar */ --pdf-scrollbar-track: #F8F7F2; --pdf-scrollbar-thumb: rgba(10, 8, 51, 0.20); --pdf-scrollbar-hover: rgba(10, 8, 51, 0.40); /* Hover-fill tints */ --pdf-hover-fill: rgba(253, 181, 49, 0.10); --pdf-hover-fill-cool: rgba(10, 8, 51, 0.04); /* Form */ --pdf-input-bg: rgba(10, 8, 51, 0.03); --pdf-input-border: rgba(10, 8, 51, 0.10); }