/* ============================================================ DESIGN TOKENS — Thakuranijiworld Site-Wide Foundation Canonical --tk-* prefix for all design tokens. --hp-* aliases remain valid within .hp-v2 homepage scope. Import this file BEFORE any component stylesheets. ============================================================ */ :root { /* ── Palette ─────────────────────────────────────── */ --tk-indigo: #141830; --tk-indigo-mid: #1c2142; --tk-indigo-light: #252b54; --tk-saffron: #e8973d; --tk-saffron-hover: #d4832c; --tk-saffron-glow: rgba(232, 151, 61, 0.25); --tk-saffron-pale: #fdf4ea; --tk-emerald: #0d9465; --tk-emerald-pale: #e6f7f0; --tk-ivory: #faf8f4; --tk-warm-white: #fefdfb; --tk-surface: #f4f2ed; --tk-white: #ffffff; --tk-text: #1c1e2a; --tk-text-mid: #4a4d5e; --tk-text-quiet: #8b8e9f; --tk-text-faint: #b3b5c2; --tk-border: #e4e2dc; --tk-border-light: #eeece6; /* Extended palette */ --tk-red: #ee0000; --tk-gold: #e8b500; --tk-star: #f59e0b; --tk-violet: #7c3aed; --tk-violet-pale: #f3eef9; --tk-violet-light: #c084fc; --tk-danger: #ef4444; /* Warm saffron variant — hover/CTA states */ --tk-saffron-warm: #e87b35; --tk-saffron-warm-dark: #d4622a; /* Alpha/Opacity variants — overlays, glows, badges */ --tk-white-90: rgba(255, 255, 255, 0.9); --tk-white-80: rgba(255, 255, 255, 0.8); --tk-white-70: rgba(255, 255, 255, 0.7); --tk-white-60: rgba(255, 255, 255, 0.6); --tk-saffron-warm-10: rgba(232, 123, 53, 0.1); --tk-saffron-warm-20: rgba(232, 123, 53, 0.2); --tk-violet-15: rgba(168, 85, 247, 0.15); --tk-violet-25: rgba(168, 85, 247, 0.25); --tk-overlay: rgba(20, 24, 48, 0.6); /* ── Color Shade Families (HSL-derived, 7 shades) ── */ --tk-indigo-50: #e8e9f0; --tk-indigo-100: #c5c7d8; --tk-indigo-200: #9ea1be; --tk-indigo-300: #777ca4; --tk-indigo-400: #585e91; --tk-indigo-500: #3a417e; --tk-indigo-600: #2a3067; --tk-indigo-700: #141830; --tk-saffron-50: #fdf4ea; --tk-saffron-100: #fae3c5; --tk-saffron-200: #f5ce9b; --tk-saffron-300: #f0b971; --tk-saffron-400: #eca852; --tk-saffron-500: #e8973d; --tk-saffron-600: #c47a2d; --tk-saffron-700: #8c5216; --tk-emerald-50: #e6f7f0; --tk-emerald-100: #bfead9; --tk-emerald-200: #93dcc0; --tk-emerald-300: #66cea7; --tk-emerald-400: #3ec394; --tk-emerald-500: #0d9465; --tk-emerald-600: #0a7a53; --tk-emerald-700: #05462e; /* Staircase zone colors — Refactoring UI Palette #10 mapped to tk- tokens. Blue Grey + Blue + Indigo + Green Vivid from the 10-shade system. */ --tk-zone-survive: #627D98; /* Blue Grey shade 5 — neutral start */ --tk-zone-alive: #2680C2; /* Blue shade 5 — building momentum */ --tk-zone-arrive: #4C63B6; /* Indigo shade 5 — authority */ --tk-zone-thrive: #199473; /* Green Vivid shade 4 — prosperous */ --tk-zone-done: #27AB83; /* Green Vivid shade 5 — accomplished */ --tk-zone-text: #F0F4F8; /* Blue Grey shade 10 — crisp stair text */ /* Neutral ramp — 10 shades following Refactoring UI Blue Grey pattern */ --tk-neutral-50: #faf8f4; /* page background (ivory) */ --tk-neutral-100: #eef0f5; /* subtle backgrounds */ --tk-neutral-200: #d1d3dc; /* borders, dividers */ --tk-neutral-300: #b3b5c2; /* DECORATIVE ONLY — never color: for readable text */ --tk-neutral-400: #8b8e9f; /* large text only (18px+) */ --tk-neutral-500: #626580; /* readable de-emphasized text (4.5:1+ on ivory) */ --tk-neutral-600: #4a4d5e; /* secondary text */ --tk-neutral-700: #3a3d4e; /* heavy secondary text */ --tk-neutral-800: #2d3040; /* fills gap between text and text-mid */ --tk-neutral-900: #1c1e2a; /* primary text */ /* ── Semantic Text Aliases (Readability Overhaul) ── */ /* --tk-text: var(--tk-neutral-900) — already #1c1e2a above */ /* --tk-text-mid: var(--tk-neutral-600) — already #4a4d5e above */ --tk-text-secondary: #626580; /* NEW — replaces text-quiet for body text (4.5:1+ on ivory) */ /* --tk-text-quiet: var(--tk-neutral-400) — RESTRICTED to 18px+ only */ --tk-text-disabled: #626580; /* NEW — replaces opacity hack for disabled states */ --tk-text-decorative: #b3b5c2; /* RENAMED from text-faint — never for readable text */ /* Dark theme text tokens */ --tk-theme-dark-text-mid: rgba(255, 255, 255, 0.8); /* ~13:1 on indigo */ --tk-theme-dark-text-quiet: rgba(255, 255, 255, 0.6); /* ~9.9:1 on indigo */ /* ── Typography ──────────────────────────────────── */ --tk-ff-display: 'DM Serif Display', 'Georgia', 'Times New Roman', serif; --tk-ff-body: 'DM Sans', 'Helvetica Neue', 'Arial', sans-serif; /* Type Scale (Article IV.3) */ --tk-fs-display: 4.5rem; /* 72px — hero headlines, stats */ --tk-fs-h1: 3rem; /* 48px — page titles */ --tk-fs-h2: 2.25rem; /* 36px — section headings */ --tk-fs-h3: 1.5rem; /* 24px — subsection headings */ --tk-fs-h4: 1.25rem; /* 20px — card titles */ --tk-fs-body: 1.0625rem; /* 17px — standard text */ --tk-fs-small: 0.875rem; /* 14px — captions, metadata */ --tk-fs-tiny: 0.75rem; /* 12px — badges, labels */ /* Line Heights (Article IV.4) */ --tk-lh-tight: 1.15; /* headings, prices */ --tk-lh-snug: 1.3; /* subheadings, labels */ --tk-lh-normal: 1.5; /* body text */ --tk-lh-relaxed: 1.6; /* prose, descriptions */ /* Tracking (letter-spacing) */ --tk-tracking-display: -0.03em; --tk-tracking-h1: -0.02em; --tk-tracking-caps: 0.06em; /* ── Spacing Scale (Article V.1) ─────────────────── */ --tk-space-xs: 4px; --tk-space-sm: 8px; --tk-space-md: 16px; --tk-space-lg: 24px; --tk-space-xl: 48px; --tk-space-2xl: 80px; --tk-space-3xl: 120px; /* ── Container Widths (Article V.4) ──────────────── */ --tk-container-sm: 720px; --tk-container-md: 960px; --tk-container-lg: 1140px; --tk-container-xl: 1400px; /* ── Radius ──────────────────────────────────────── */ --tk-r-xs: 4px; --tk-r-sm: 6px; --tk-r: 10px; --tk-r-lg: 14px; --tk-r-xl: 20px; --tk-r-pill: 100px; /* ── Z-Index Scale ───────────────────────────────── */ --tk-z-base: 0; --tk-z-raised: 1; --tk-z-dropdown: 10; --tk-z-sticky: 100; --tk-z-nav: 200; --tk-z-overlay: 300; --tk-z-modal: 400; --tk-z-toast: 500; --tk-z-tooltip: 600; --tk-z-max: 9999; /* ── Opacity Scale ───────────────────────────────── */ --tk-o-0: 0; --tk-o-5: 0.05; --tk-o-10: 0.1; --tk-o-20: 0.2; --tk-o-40: 0.4; --tk-o-50: 0.5; --tk-o-60: 0.6; --tk-o-75: 0.75; --tk-o-80: 0.8; --tk-o-85: 0.85; --tk-o-90: 0.9; --tk-o-100: 1; /* ── Shadows (Multi-Layer, Brand-Tinted) ─────────── */ --tk-sh-subtle: 0 1px 1px rgba(20, 24, 48, 0.03), 0 2px 4px rgba(20, 24, 48, 0.04); --tk-sh-card: 0 0 0 1px rgba(20, 24, 48, 0.04), 0 1px 2px rgba(20, 24, 48, 0.06), 0 4px 12px rgba(20, 24, 48, 0.06); --tk-sh-lifted: 0 0 0 1px rgba(20, 24, 48, 0.03), 0 4px 8px rgba(20, 24, 48, 0.06), 0 12px 32px rgba(20, 24, 48, 0.08); --tk-sh-dramatic: 0 0 0 1px rgba(20, 24, 48, 0.04), 0 8px 16px rgba(20, 24, 48, 0.08), 0 24px 48px rgba(20, 24, 48, 0.12); /* Focus & Glow Shadows (interactive states) */ --tk-sh-focus: 0 0 0 4px var(--tk-saffron-warm-20); --tk-sh-focus-subtle: 0 0 0 4px var(--tk-saffron-warm-10); --tk-sh-glow: 0 4px 12px var(--tk-saffron-glow); --tk-sh-glow-lg: 0 8px 24px var(--tk-saffron-glow); /* ── Transition Tokens (Article XV.4) ────────────── */ --tk-duration-fast: 150ms; --tk-duration-normal: 300ms; --tk-duration-slow: 500ms; --tk-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --tk-ease-in: cubic-bezier(0.4, 0, 1, 1); --tk-ease-out: cubic-bezier(0, 0, 0.2, 1); --tk-ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Emil Kowalski spring deceleration */ /* ── Section Theme Tokens (Article XIII.1) ───────── */ --tk-theme-light-bg: var(--tk-ivory); --tk-theme-light-text: var(--tk-text); --tk-theme-dark-bg: var(--tk-indigo); --tk-theme-dark-text: var(--tk-ivory); --tk-theme-subtle-bg: var(--tk-neutral-50); --tk-theme-subtle-text: var(--tk-text); --tk-theme-gravity-bg: #0a0c18; --tk-theme-gravity-text: var(--tk-neutral-200); }