/* ═══════════════════════════════════════════════════════════════════ KOHISTANI — SHARED BRAND TOKENS v1.0.0 Canonical design tokens for: • kohistani.com — Travel with Kohistani (brand / channel) • kohistanimedia.com — Kohistani Media AB (company) RULES 1. This file must be BYTE-IDENTICAL on both sites. If it diverges, it is no longer a shared system. Change it here, deploy to both. 2. Tokens only. No component rules, no element selectors, no layout. Anything site-specific belongs in that site's own style.css. 3. Load order: bootstrap.min.css → brand-tokens.css → site style.css 4. Dark mode is driven by [data-bs-theme="dark"] on (Bootstrap 5.3 convention). Never use a body class. NAMING Token names follow kohistani.com's existing vocabulary so the larger, more mature stylesheet needs no renaming. kohistanimedia.com adopts these names via km-compat.css. ═══════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── 1. BRAND PALETTE — identical in both themes, both sites. This is the identity layer. Do not theme these. ─────────────────────────────────────────────────────────────────── */ :root { /* Primary — the single colour both properties share */ --brand-blue: #0F67B1; --brand-blue-rgb: 15, 103, 177; --primary-hover: #2B8FE6; /* hover/active/focus; link colour on dark */ --primary-hover-rgb: 43, 143, 230; /* Accent — small highlights, badges, rules. Use sparingly. Replaces the retired kohistanimedia orange #FF6B35. */ --brand-gold: #F5B700; --brand-gold-rgb: 245, 183, 0; /* Success / positive */ --brand-green: #4CAF50; --brand-green-rgb: 76, 175, 80; /* Destructive + YouTube-style subscribe CTA only. White text on this passes AA (~4.8:1). */ --danger: #E0202C; --danger-rgb: 224, 32, 44; /* Deep navy anchors — the dark end of the brand ramp. Replaces the retired kohistanimedia #003049. */ --brand-navy-deep: #060D14; --brand-navy: #0A1622; --brand-navy-soft: #0D1B2A; --brand-navy-soft-rgb: 13, 27, 42; /* for rgba() tints */ --white: #FFFFFF; } /* ─────────────────────────────────────────────────────────────────── 2. LIGHT THEME ─────────────────────────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* Surfaces */ --surface-body: #F8FAFC; /* page background — cool off-white */ --surface-section: #EFF3F7; /* alternating section bands */ --surface-card: #FFFFFF; --surface-nav: rgba(255, 255, 255, 0.93); --surface-input: #FFFFFF; --surface-alt: #F0F1F3; --surface-form-card: #FFFFFF; --surface-textarea: #F0F1F3; --surface-footer: #0A1622; /* footer stays navy in both themes */ /* Text */ --text-primary: #1B3A5C; /* dark navy — clearly blue, not black */ --text-secondary: #4E6277; /* ~6.0:1 on --surface-body */ --text-tertiary: #64748B; /* ~4.6:1 — see ACCESSIBILITY note below */ --text-on-dark: #FFFFFF; --text-on-brand: #FFFFFF; /* Gold and green are unreadable as text on light surfaces (~1.9:1 and ~2.7:1). Use these darkened inks when the accent colours must carry words. Backgrounds/fills keep the bright value. */ --brand-gold-ink: #8A6A00; /* ~4.8:1 on --surface-body */ --brand-green-ink: #2E7D32; /* ~4.9:1 on --surface-body */ --brand-blue-ink: #0F67B1; /* ~5.6:1 — blue is fine as-is on light */ /* Borders */ --border: #E2E8F0; --border-strong: #CBD5E1; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 32px rgba(0,0,0,.12); --shadow-xl: 0 16px 48px rgba(0,0,0,.14); /* Hero */ --hero-bg: linear-gradient(135deg, #0D1B2A 0%, #0F67B1 55%, #1a3a6c 100%); --hero-fade: #1a3a6c; --hero-text: #FFFFFF; --hero-text-muted: rgba(255,255,255,.75); --hero-text-faint: rgba(255,255,255,.52); --hero-pill-bg: rgba(255,255,255,.12); --hero-pill-border: rgba(255,255,255,.20); --hero-pill-text: rgba(255,255,255,.92); --hero-badge-bg: rgba(255,255,255,.14); --hero-badge-border: rgba(255,255,255,.22); --hero-badge-text: rgba(255,255,255,.88); --hero-dot: rgba(255,255,255,.06); } /* ─────────────────────────────────────────────────────────────────── 3. DARK THEME — brand navy, not a neutral grey and not GitHub-dark ─────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { /* Surfaces */ --surface-body: #0A1622; /* page background */ --surface-section: #0A1622; /* same as body; cards supply elevation */ --surface-card: #0D1B2A; --surface-nav: rgba(10, 22, 34, 0.96); --surface-input: #14253A; --surface-alt: rgba(255,255,255,0.04); --surface-form-card: #0D1B2A; --surface-textarea: #14253A; --surface-footer: #060D14; /* deeper than page background */ /* Text */ --text-primary: #E2EAF0; /* cool off-white, not pure white */ --text-secondary: #8A9BB0; /* ~6.4:1 on --surface-body */ --text-tertiary: #7B8FA6; /* ~5.5:1 — see ACCESSIBILITY note below */ --text-on-dark: #FFFFFF; --text-on-brand: #FFFFFF; /* Gold and green read cleanly on navy — no darkened variant needed. Blue is the mirror case: --brand-blue is only ~2.9:1 on a navy surface and fails even the 3:1 large-text bar, so its ink LIGHTENS here. Never use --brand-blue directly as text on dark. */ --brand-gold-ink: #F5B700; /* ~10:1 on --surface-body */ --brand-green-ink: #4CAF50; /* ~5.6:1 on --surface-body */ --brand-blue-ink: #2B8FE6; /* ~5.4:1 on --surface-body */ /* Borders — opacity-based over navy */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); /* Shadows — heavier to register against navy */ --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 1px 4px rgba(0,0,0,.45); --shadow-md: 0 4px 12px rgba(0,0,0,.55); --shadow-lg: 0 8px 32px rgba(0,0,0,.65); --shadow-xl: 0 16px 48px rgba(0,0,0,.75); /* Hero */ --hero-bg: linear-gradient(135deg, #060D14 0%, #0A1622 45%, #0D1B2A 100%); --hero-fade: #0A1622; --hero-text: #FFFFFF; --hero-text-muted: rgba(255,255,255,.72); --hero-text-faint: rgba(255,255,255,.48); --hero-pill-bg: rgba(255,255,255,.16); --hero-pill-border: rgba(255,255,255,.24); --hero-pill-text: rgba(255,255,255,.90); --hero-badge-bg: rgba(255,255,255,.12); --hero-badge-border: rgba(255,255,255,.20); --hero-badge-text: rgba(255,255,255,.85); --hero-dot: rgba(255,255,255,.055); } /* ─────────────────────────────────────────────────────────────────── 4. GRADIENTS — shared, theme-independent ─────────────────────────────────────────────────────────────────── */ :root { /* Brand gradient: blue → navy. Replaces kohistanimedia's --gradient-primary, which ended on the retired #003049. */ --gradient-brand: linear-gradient(135deg, #0F67B1 0%, #0D1B2A 100%); /* Scrim for text over photography */ --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.70) 100%); } /* ─────────────────────────────────────────────────────────────────── 5. TYPOGRAPHY --font-body and --font-fa are shared: the two sites are the same voice at body level. --font-display defaults to the body face. kohistani.com overrides it to Cormorant Garamond in its own style.css — that editorial serif is the brand site's signature and is deliberately NOT shared. kohistanimedia.com leaves the default and stays on Inter throughout. ─────────────────────────────────────────────────────────────────── */ :root { --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: var(--font-body); --font-fa: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; } /* ─────────────────────────────────────────────────────────────────── 6. GEOMETRY, MOTION, LAYOUT ─────────────────────────────────────────────────────────────────── */ :root { /* Radius */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-pill: 9999px; /* Spacing */ --space-section: 80px; --space-section-sm: 48px; /* Motion */ --transition: 0.18s ease; --transition-fast: 0.15s ease; --transition-medium: 0.30s ease; --transition-slow: 0.50s ease; /* Layout */ --nav-height: 64px; --content-max: 1200px; } /* ─────────────────────────────────────────────────────────────────── 7. BOOTSTRAP 5.3 BRIDGE Maps brand tokens onto Bootstrap's variables so stock components (.btn, .card, .form-control, .dropdown) inherit the brand for free. Must load AFTER bootstrap.min.css. ─────────────────────────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { --bs-primary: var(--brand-blue); --bs-primary-rgb: var(--brand-blue-rgb); --bs-body-bg: var(--surface-body); --bs-body-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-border-color: var(--border); --bs-card-bg: var(--surface-card); --bs-card-border-color: var(--border); --bs-link-color: var(--brand-blue); --bs-link-hover-color: var(--primary-hover); --bs-input-bg: var(--surface-input); --bs-input-border-color: var(--border-strong); --bs-danger: var(--danger); --bs-danger-rgb: var(--danger-rgb); --bs-success: var(--brand-green); --bs-success-rgb: var(--brand-green-rgb); --bs-warning: var(--brand-gold); --bs-warning-rgb: var(--brand-gold-rgb); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-pill: var(--radius-pill); } [data-bs-theme="dark"] { --bs-primary: var(--brand-blue); --bs-primary-rgb: var(--brand-blue-rgb); --bs-body-bg: var(--surface-body); --bs-body-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-border-color: var(--border); --bs-card-bg: var(--surface-card); --bs-card-border-color: var(--border); --bs-link-color: var(--primary-hover); /* bright blue on navy */ --bs-link-hover-color: #4BA8F0; --bs-input-bg: var(--surface-input); --bs-input-border-color: var(--border); --bs-dropdown-bg: var(--surface-alt); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-bg: rgba(255,255,255,.05); --bs-danger: var(--danger); --bs-danger-rgb: var(--danger-rgb); --bs-success: var(--brand-green); --bs-success-rgb: var(--brand-green-rgb); --bs-warning: var(--brand-gold); --bs-warning-rgb: var(--brand-gold-rgb); } /* ─────────────────────────────────────────────────────────────────── 8. MOTION PREFERENCE ─────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --transition: 0s; --transition-fast: 0s; --transition-medium: 0s; --transition-slow: 0s; } } /* ═══════════════════════════════════════════════════════════════════ ACCESSIBILITY NOTE — two deliberate changes from kohistani.com's current live values. Both are contrast fixes, not restyles: --text-tertiary (light) #8A9BB0 → #64748B #8A9BB0 on #F8FAFC measures ~2.7:1 and fails WCAG AA for normal text. This token is used for captions and labels, so it must clear 4.5:1. #64748B measures ~4.6:1. --text-tertiary (dark) #5C6F84 → #7B8FA6 #5C6F84 on #0A1622 measures ~3.5:1 — passes for large text only. #7B8FA6 measures ~5.5:1. Everything else matches kohistani.com's live palette exactly. Verified AA pairings: white on --brand-blue ~5.8:1 white on --danger ~4.8:1 --text-secondary on body ~6.0:1 light / ~6.4:1 dark --brand-gold-ink on body ~4.8:1 light / ~10:1 dark --brand-green-ink on body ~4.9:1 light / ~5.6:1 dark --brand-blue-ink on body ~5.6:1 light / ~5.4:1 dark The ink family is symmetrical: every accent that can carry text has an ink variant, and the rule has no exceptions — accent as text, use the ink. Gold and green darken in light mode; blue lightens in dark mode. --brand-gold-ink is tuned to clear the strict 4.5:1 body-text bar, so it is safe at any size. It is deliberately NOT pushed brighter: a richer #A67C00 (~3.6:1) only passes as large text, and a general-purpose token will eventually land on small text. ═══════════════════════════════════════════════════════════════════ */