/* ══════════════════════════════════════════════════════════════════════════ tokens.css — SHIRWAN IT design tokens (single source of truth) THIS IS THE ONLY FILE THAT DEFINES A COLOR VALUE. Every other stylesheet references these variables via var(--token). Change a color here and the whole site follows — no page-by-page edits. Load order on every page (see any .html ): 1. tokens.css ← values live here 2. style.css ← layout + components, reference tokens only 3. works.css ← gallery page, references tokens only 4. theme-modern.css ← motion + the black-and-gold skin Theme: BLACK & GOLD. Warm near-black surfaces, gold accents. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── BRAND: gold ─────────────────────────────────────────────────────── --gold is the primary accent. --gold-light is for text and hover states (it clears 7:1 contrast on every surface below); --gold-dark / --gold-deep are for gradient ends and pressed states. */ --gold: #E8B530; --gold-light: #FCE6A0; --gold-dark: #C8911A; --gold-deep: #9a6c12; --gold-grad: linear-gradient(135deg, #FCE6A0 0%, #E8B530 45%, #C8911A 100%); --gold-grad-2: linear-gradient(135deg, #E8B530 0%, #C8911A 100%); /* Gold at low alpha — for tinted fills, rings and hairlines. Kept as variables so a palette change doesn't leave stale rgba() behind. */ --gold-a08: rgba(232,181,48,.08); --gold-a12: rgba(232,181,48,.12); --gold-a18: rgba(232,181,48,.18); --gold-a30: rgba(232,181,48,.30); --gold-a45: rgba(232,181,48,.45); /* ── SURFACES: warm near-black, darkest → lightest ────────────────────── */ --bg: #0a0908; /* page background */ --bg-2: #100e0a; /* alternating section background */ --surface: #17140d; /* cards, panels, the default raised surface */ --surface-2: #1f1b12; /* inputs, hover states, a card on a card */ --surface-3: #14110b; /* sunken wells, table stripes */ --overlay: rgba(5,4,3,.72); /* modal scrim */ /* ── INK: text, lightest → dimmest ───────────────────────────────────── --ink-on-gold is the ONLY dark ink: it is text sitting ON a gold fill (buttons, active tabs, badges). Never use it on a dark surface. */ --ink: #f5f1e6; --ink-2: #cabfa7; --ink-3: #9d9482; --ink-4: #857d6c; --ink-on-gold: #1a1305; /* ── LINES ───────────────────────────────────────────────────────────── Borders are gold at low alpha, never grey — that is what keeps panels feeling part of one system instead of bolted on. */ --line: rgba(232,181,48,.16); --line-2: rgba(232,181,48,.34); --line-3: rgba(232,181,48,.50); /* ── SEMANTIC ────────────────────────────────────────────────────────── Tuned for a dark background: the mid-tone is the fill, the -ink shade is the readable text version, -bg is the tinted surface behind it. Warning deliberately sits away from brand gold (amber-400 vs #E8B530) so an alert never reads as decoration. */ --success: #34d399; --success-ink: #6ee7b7; --success-bg: rgba(52,211,153,.13); --success-line: rgba(52,211,153,.34); --danger: #f87171; --danger-ink: #fca5a5; --danger-bg: rgba(248,113,113,.13); --danger-line: rgba(248,113,113,.34); --warn: #fbbf24; --warn-ink: #fcd34d; --warn-deep: #b45309; /* darker end of a warning gradient */ --warn-bg: rgba(251,191,36,.13); --warn-line: rgba(251,191,36,.34); --info: var(--gold); --info-ink: var(--gold-light); --info-bg: var(--gold-a12); --info-line: var(--line-2); /* ── BACKWARD-COMPATIBILITY ALIASES ──────────────────────────────────── The old indigo/blue/grey variable names are still referenced in places. They are remapped onto the gold system rather than deleted, so nothing silently falls back to an unstyled default. Prefer the semantic names above in new code; these exist so old selectors stay themed. */ --brand-600: var(--gold); --brand-700: var(--gold-dark); --brand-800: var(--gold-deep); --brand-500: var(--gold-light); --brand-100: var(--gold-a18); --brand-50: var(--gold-a08); --violet-600: var(--gold); --violet-500: var(--gold-light); --blue-900: var(--bg); --blue-800: var(--bg-2); --blue-700: var(--gold-dark); --blue-600: var(--gold); --blue-500: var(--gold-light); --blue-400: var(--gold); --blue-100: var(--gold-a18); --blue-50: var(--gold-a08); --gray-900: var(--bg); --gray-700: var(--ink-2); --gray-500: var(--ink-3); --gray-300: var(--line-2); --gray-100: var(--surface-2); --gray-50: var(--surface-3); --white: var(--surface); /* was #fff — now the card surface */ --green-600: var(--success); --green-500: var(--success); --green-100: var(--success-bg); --red-500: var(--danger); --red-100: var(--danger-bg); --yellow-500: var(--warn); --yellow-100: var(--warn-bg); /* ── TYPE ────────────────────────────────────────────────────────────── One stack for the whole site. Noto Sans Arabic covers Kurdish Sorani and Arabic, so RTL pages keep the same rhythm as the English ones. */ --font: 'Plus Jakarta Sans', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; /* ── SHAPE & DEPTH ───────────────────────────────────────────────────── Shadows are pure black on a dark theme — a tinted shadow turns muddy. */ --radius: 16px; --radius-sm: 10px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(0,0,0,.35); --shadow: 0 8px 30px rgba(0,0,0,.45); --shadow-lg: 0 24px 70px rgba(0,0,0,.60); --glow: 0 6px 18px rgba(232,181,48,.34); /* gold lift on buttons */ --glow-lg: 0 10px 26px rgba(232,181,48,.50); /* ── MOTION ────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.16, 1, .3, 1); --t-fast: .18s; --t: .25s; --t-slow: .45s; } /* Respect the OS "reduce motion" setting site-wide. theme-modern.css adds a lot of animation; this switches all of it off in one place rather than per-keyframe. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }