/* ============================================================ Kishore Gupta Portfolio — Design Tokens Phase 1 design system. Dark is the default theme. Toggle light mode with . ============================================================ */ :root { /* ---- Type families ---- */ --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Fluid type scale (Minor Third ~1.2) ---- */ /* step--1 and step-1 kept as-is: they set the Publications sizing, which is the reference */ --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem); --step-0: clamp(0.98rem, 0.95rem + 0.20vw, 1.05rem); /* body */ --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem); --step-2: clamp(1.36rem, 1.24rem + 0.60vw, 1.66rem); --step-3: clamp(1.60rem, 1.42rem + 0.95vw, 2.10rem); --step-4: clamp(1.90rem, 1.60rem + 1.55vw, 2.75rem); --step-5: clamp(2.30rem, 1.86rem + 2.25vw, 3.65rem); --step-6: clamp(2.55rem, 1.80rem + 3.6vw, 4.55rem); /* hero display */ --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.65; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing scale (8pt-based) ---- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --container-max: 1200px; --content-max: 68ch; /* ---- Radii ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* smooth easeOutExpo — the "Apple" glide */ --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 520ms; --dur-reveal: 900ms; /* ---- Brand accent (stable across themes) ---- */ --accent: #2ecc8f; /* signal green — "quality / pass" */ --accent-strong: #21b87c; --accent-soft: rgba(46, 204, 143, 0.14); --accent-2: #7c8cff; /* secondary (violet) for gradients */ --gradient-brand: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); } /* ============================================================ DARK THEME (default) ============================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0b0f; /* deep ink, near-black */ --bg-elevated: #0f1116; --surface: #13161c; --surface-2: #191d24; --border: #23262e; /* softer hairline for restraint */ --border-strong: #333844; --text: #f0f2f6; --text-muted: #a7afbe; --text-dim: #737c8c; --text-on-accent: #06231a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-lg: 0 32px 72px rgba(0, 0, 0, 0.62); --ring: 0 0 0 3px var(--accent-soft); --grid-line: rgba(255, 255, 255, 0.035); /* ---- Premium primitives ---- */ --glass-bg: color-mix(in srgb, var(--bg-elevated) 70%, transparent); --glass-border: rgba(255, 255, 255, 0.07); --hairline: rgba(255, 255, 255, 0.06); --card-top-light: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%); --glow-accent: 0 0 44px -10px color-mix(in srgb, var(--accent) 60%, transparent); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ============================================================ LIGHT THEME Applied when the visitor forces light (data-theme="light") OR when they haven't chosen and their OS prefers light. ============================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f0f2f5; --border: #e2e6ec; --border-strong: #cbd2dc; --text: #11151c; --text-muted: #4a5464; --text-dim: #5b6675; /* AA: 5.49:1 on light bg */ --text-on-accent: #ffffff; /* white on accent button — AA 5.86:1 */ --accent: #0b7350; /* AA: >=4.6:1 as small text on light + tinted chips */ --accent-strong: #096245; --accent-soft: rgba(11, 115, 80, 0.12); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 12px 30px rgba(16, 24, 40, 0.10); --shadow-lg: 0 30px 64px rgba(16, 24, 40, 0.14); --grid-line: rgba(0, 0, 0, 0.035); /* ---- Premium primitives (light) ---- */ --glass-bg: color-mix(in srgb, #ffffff 72%, transparent); --glass-border: rgba(16, 24, 40, 0.08); --hairline: rgba(16, 24, 40, 0.07); --card-top-light: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 42%); --glow-accent: 0 0 40px -12px color-mix(in srgb, var(--accent) 40%, transparent); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* Dark is the default theme. Light applies only when the visitor explicitly chooses it (data-theme="light"), set via the toggle. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; } }