/* * James Pratt — Personal Brand System * Design Tokens v1.0 | 2026-05-24 * Reference style: Cal.com (warm professional) * * Font loading (add to or CSS imports): * Cal Sans: https://fonts.cdnfonts.com/css/cal-sans * Inter: https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap */ :root { /* ─── TYPOGRAPHY ──────────────────────────────────────────────── */ --font-display: 'Cal Sans', 'SF Pro Display', system-ui, sans-serif; --font-body: 'Inter', 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* Type scale (4px base, 1.25 ratio) */ --text-xs: 0.75rem; /* 12px — captions, labels */ --text-sm: 0.875rem; /* 14px — secondary body */ --text-base: 1rem; /* 16px — primary body */ --text-lg: 1.125rem; /* 18px — large body / small headings */ --text-xl: 1.25rem; /* 20px — section headings */ --text-2xl: 1.5rem; /* 24px — Cal Sans min size */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px — hero display */ /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Leading */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed:1.65; --leading-loose: 1.8; /* Tracking */ --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* ─── COLOR — DARK MODE (default) ───────────────────────────── */ /* Backgrounds */ --color-bg: #0f1117; /* very dark navy — primary surface */ --color-bg-subtle: #151820; /* slightly elevated */ --color-bg-muted: #1c2030; /* card / panel surface */ --color-bg-overlay: #232840; /* modal, popover */ /* Borders */ --color-border: #252b3b; /* default border */ --color-border-muted: #1c2230; /* subtle separator */ --color-border-strong:#323c52; /* emphasized border */ /* Text */ --color-text-primary: #f0f1f3; /* headings, high-emphasis */ --color-text-secondary: #8b92a5; /* body, descriptions */ --color-text-muted: #4e566a; /* placeholders, disabled */ --color-text-inverted: #0f1117; /* text on light/accent bg */ /* Accent — Indigo */ --color-accent: #6366f1; /* primary interactive */ --color-accent-hover: #7c7ff5; /* hover state */ --color-accent-active: #4f52d4; /* pressed state */ --color-accent-subtle: rgba(99,102,241,0.12); /* tinted bg */ --color-accent-border: rgba(99,102,241,0.35); /* accent border */ /* Semantic */ --color-success: #22c55e; --color-success-subtle: rgba(34,197,94,0.10); --color-warning: #f59e0b; --color-warning-subtle: rgba(245,158,11,0.10); --color-danger: #ef4444; --color-danger-subtle: rgba(239,68,68,0.10); --color-info: #38bdf8; --color-info-subtle: rgba(56,189,248,0.10); /* ─── SPACING (4px base) ─────────────────────────────────────── */ --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-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 */ /* ─── BORDER RADIUS ──────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ─── SHADOWS ────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 8px 24px rgba(0,0,0,0.4); --shadow-xl: 0 16px 48px rgba(0,0,0,0.5); --shadow-accent: 0 0 0 3px rgba(99,102,241,0.3); /* ─── GRID ───────────────────────────────────────────────────── */ --grid-cols: 12; --grid-gutter: var(--space-6); /* 24px */ --content-max: 1080px; --content-narrow: 720px; --content-wide: 1280px; /* ─── TRANSITIONS ────────────────────────────────────────────── */ --transition-fast: 100ms ease; --transition-base: 150ms ease; --transition-slow: 250ms ease; --transition-slower: 400ms ease; /* ─── Z-INDEX ────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown:100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } /* ─── LIGHT MODE OVERRIDES ─────────────────────────────────────── */ /* Apply via: .light, [data-theme="light"], or @media (prefers-color-scheme: light) */ .light, [data-theme="light"] { /* Backgrounds */ --color-bg: #fafaf9; /* warm white */ --color-bg-subtle: #f4f4f2; --color-bg-muted: #ededea; --color-bg-overlay: #e7e7e3; /* Borders */ --color-border: #ddddd8; --color-border-muted: #e8e8e4; --color-border-strong:#c4c4be; /* Text */ --color-text-primary: #111117; --color-text-secondary: #52525b; --color-text-muted: #a1a1aa; --color-text-inverted: #fafaf9; /* Accent stays the same — indigo reads well on both modes */ --color-accent: #6366f1; --color-accent-hover: #4f52d4; --color-accent-active: #3d40c0; --color-accent-subtle: rgba(99,102,241,0.08); --color-accent-border: rgba(99,102,241,0.25); /* Shadows — lighter on light bg */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10); --shadow-xl: 0 16px 48px rgba(0,0,0,0.12); }