/* ============================================================
KIDAB — Design Tokens v1.1.0
============================================================
Document: tokens.css
Created: 2026-03-20
Author: Diyar Hussein
Depends: Part 2, Steps 2.1–2.5 (all locked decisions)
Every color traces to a real Mesopotamian material (3000–500 BCE).
Every font is SIL OFL licensed.
Scale: Major Third (1.250), base 16px.
AUTHORITY: This file is the single source of truth for all
visual design tokens. All UI components must reference these
variables. Do not hardcode colors or font sizes.
============================================================ */
/* ============================================================
1. FONTS — Load via in HTML , NOT @import
============================================================
IMPORTANT: Do NOT use @import for Google Fonts — it blocks the
browser's Preload Scanner and serializes font downloads, harming
FCP (target: < 1.5s per Build Bible performance budget).
Add these tags to every HTML file's instead:
Font assignments:
- Cinzel: Latin display headings (h1–h3)
- Cormorant Garamond: Latin body + UI text (h4+, paragraphs)
- Amiri: Arabic display headings (h1–h3, large text)
- Noto Naskh Arabic: Arabic body + UI text (forms, nav, cards)
============================================================ */
/* Cuneiform — Logo mark only (KI 𒆠 + DAB₅ 𒆪) */
@font-face {
font-family: 'Noto Sans Cuneiform';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-cuneiform@latest/cuneiform-400-normal.woff2) format('woff2');
unicode-range: U+12000-123FF, U+12400-1247F, U+12480-1254F;
}
/* ============================================================
2. FONT STACKS
============================================================ */
:root {
/* Latin */
--font-display: 'Cinzel', serif;
--font-body: 'Cormorant Garamond', serif;
/* Arabic */
--font-display-ar: 'Amiri', serif;
--font-body-ar: 'Noto Naskh Arabic', serif;
/* Cuneiform (logo mark only — never in running text) */
--font-cuneiform: 'Noto Sans Cuneiform', serif;
/* System fallback */
--font-system: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Courier New', Courier, monospace;
}
/* ============================================================
3. TYPE SCALE — Major Third (1.250), base 1rem = 16px
============================================================
Step Ratio px rem Role
─────────────────────────────────────
h1 ×2.441 39px 2.441 Hero / page title
h2 ×1.953 31px 1.953 Section heading
h3 ×1.563 25px 1.563 Subsection
h4 ×1.25 20px 1.25 Card title
h5 ×1 16px 1 Subheading (matches body)
h6 ×0.813 13px 0.813 Label / overline
body ×1 16px 1 Running text
sm ×0.875 14px 0.875 Secondary text
cap ×0.75 12px 0.75 Caption
over ×0.688 11px 0.688 Overline (smallest allowed)
============================================================ */
:root {
/* Font sizes — static (use clamp() overrides below for responsive) */
--fs-h1: 2.441rem;
--fs-h2: 1.953rem;
--fs-h3: 1.563rem;
--fs-h4: 1.25rem;
--fs-h5: 1rem;
--fs-h6: 0.813rem;
--fs-body: 1rem;
--fs-sm: 0.875rem;
--fs-caption: 0.75rem;
--fs-over: 0.688rem;
/* Fluid font sizes — clamp(min, preferred, max) */
--fs-h1-fluid: clamp(1.953rem, 1.6rem + 1.5vw, 2.441rem);
--fs-h2-fluid: clamp(1.563rem, 1.3rem + 1.1vw, 1.953rem);
--fs-h3-fluid: clamp(1.25rem, 1.1rem + 0.8vw, 1.563rem);
--fs-body-fluid: clamp(0.938rem, 0.9rem + 0.2vw, 1rem);
/* Line heights — Latin */
--lh-h1: 1.2;
--lh-h2: 1.25;
--lh-h3: 1.3;
--lh-h4: 1.4;
--lh-h5: 1.4;
--lh-h6: 1.4;
--lh-body: 1.65;
--lh-sm: 1.5;
--lh-caption: 1.4;
/* Line heights — Arabic (taller for diacritics) */
--lh-h1-ar: 1.4;
--lh-h2-ar: 1.45;
--lh-h3-ar: 1.5;
--lh-h4-ar: 1.5;
--lh-body-ar: 1.8;
--lh-sm-ar: 1.7;
--lh-cap-ar: 1.6;
/* Font weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* Letter spacing — Latin display only (never on Arabic) */
--ls-display: 0.15em;
--ls-heading: 0.06em;
--ls-overline: 0.1em;
--ls-body: normal;
}
/* ============================================================
4. COLORS — Mesopotamian Material Palette
============================================================
Every color maps to a real archaeological material.
Akkadian/Sumerian terms in comments for reference.
============================================================ */
:root {
/* ── Primary: Lapis Lazuli (uqnû) ── */
--color-night-lapis: #0B1A2E; /* Deep lapis — primary bg (dark mode) */
--color-deep-lapis: #0F2035; /* Raw lapis vein — elevated surfaces */
--color-lapis-mid: #162A45; /* Lapis mid-vein — hover states */
/* ── Primary: Gold (ḫurāṣu) ── */
--color-brand-gold: #C69C3E; /* Patina'd gold — brand identity, 30% */
--color-bright-gold: #D4A843; /* Freshly hammered — CTAs, buttons, 10% */
--color-light-gold: #DBBE72; /* Gold leaf catching fire — links, tags */
--color-deep-gold: #8A6520; /* Aged gold in shadow — CTA on light mode */
--color-antique-gold: #7A5A1E; /* Antiqued patina — links on light mode */
/* ── Earth: Clay spectrum ── */
--color-fired-clay: #BF9360; /* Kiln-fired tablet clay — warm surfaces */
--color-clay-border: #8A6B42; /* Sun-dried clay edge — borders, dividers */
--color-deep-clay: #5C4A30; /* Wet river clay — dark text on light bg */
/* ── Sand & Shell ── */
--color-river-sand: #E6D2AE; /* Tigris/Euphrates alluvial silt — body text (dark mode) */
--color-faded-sand: #BFA87C; /* Dry sand — secondary text (dark mode) */
--color-dry-clay: #8A7A62; /* Parched clay — tertiary/hint text */
/* ── Neutrals: Stone & Mineral ── */
--color-gypsum: #F5F0E6; /* Gypsum plaster (gaṣṣu) — light mode bg */
--color-aged-gypsum: #EDE7D9; /* Aged gypsum — light mode hover */
--color-shell-white: #FFFFFF; /* Calcite shell inlay — elevated (light) */
--color-limestone: #D9D0C1; /* Cut limestone — secondary surface */
--color-weathered: #A89B88; /* Diorite/sandstone — placeholder text */
--color-bitumen: #1A1A18; /* Bitumen tar (kupru) — deepest dark */
/* ── Semantic: Archaeological Minerals ── */
/* Success — Malachite (copper patina, šušu / warqu) */
--color-malachite: #3D7A4A;
--color-malachite-deep:#2C6038; /* Light mode variant */
--color-malachite-bg: #E8F2EA;
--color-malachite-mid: #A8CEAF;
--color-malachite-dark:#1E3D25;
/* Warning — Yellow Ochre (iron-rich clay, karānu) */
--color-ochre: #B8862B;
--color-ochre-burnt: #8A6520; /* Light mode variant */
--color-ochre-bg: #FBF3E0;
--color-ochre-mid: #DCBC6E;
--color-ochre-dark: #5C4316;
/* Danger — Carnelian (sāmu, hematite/red ochre) */
--color-carnelian: #A63A2A;
--color-carnelian-deep:#8B2E1E; /* Light mode variant */
--color-carnelian-bg: #FAEDEA;
--color-carnelian-mid: #D9887A;
--color-carnelian-dark:#532015;
/* Info — Egyptian Blue (zagindurû, synthetic copper pigment) */
--color-egypt-blue: #1D4E7E;
--color-egypt-deep: #1A4268; /* Light mode variant */
--color-egypt-bg: #E6EEF6;
--color-egypt-mid: #7FACC9;
--color-egypt-dark: #0F273F;
}
/* ============================================================
5. SEMANTIC TOKENS — Dark Mode (default)
============================================================
Lapis surfaces, sand/gold text, bright gold CTAs.
"Artifact in a museum case under spot lighting."
============================================================ */
:root,
[data-theme="dark"] {
/* Surfaces */
--surface-primary: var(--color-night-lapis);
--surface-elevated: var(--color-deep-lapis);
--surface-hover: var(--color-lapis-mid);
/* Text */
--text-primary: var(--color-river-sand); /* 11.8:1 AAA */
--text-secondary: var(--color-faded-sand); /* 7.6:1 AAA */
--text-tertiary: var(--color-dry-clay); /* 4.2:1 lg */
--text-brand: var(--color-brand-gold); /* 6.8:1 AA */
/* Interactive */
--interactive-primary: var(--color-bright-gold); /* 7.9:1 AAA */
--interactive-hover: var(--color-light-gold);
--interactive-brand: var(--color-brand-gold);
--link-color: var(--color-light-gold);
--link-hover: var(--color-river-sand);
--focus-ring: var(--color-bright-gold);
/* Borders */
--border-default: rgba(198, 156, 62, 0.12);
--border-hover: rgba(198, 156, 62, 0.25);
--border-strong: rgba(198, 156, 62, 0.40);
/* Semantic states */
--color-success: var(--color-malachite);
--color-success-bg: rgba(61, 122, 74, 0.12);
--color-success-text: var(--color-malachite-mid);
--color-warning: var(--color-ochre);
--color-warning-bg: rgba(184, 134, 43, 0.12);
--color-warning-text: var(--color-ochre-mid);
--color-danger: var(--color-carnelian);
--color-danger-bg: rgba(166, 58, 42, 0.12);
--color-danger-text: var(--color-carnelian-mid);
--color-info: var(--color-egypt-blue);
--color-info-bg: rgba(29, 78, 126, 0.12);
--color-info-text: var(--color-egypt-mid);
}
/* ============================================================
6. SEMANTIC TOKENS — Light Mode
============================================================
Gypsum surfaces, bitumen/clay text, darkened gold CTAs.
"Same artifact on an archaeological dig at noon."
============================================================ */
[data-theme="light"] {
/* Surfaces */
--surface-primary: var(--color-gypsum);
--surface-elevated: var(--color-shell-white);
--surface-hover: var(--color-aged-gypsum);
/* Text */
--text-primary: var(--color-bitumen); /* 15.3:1 AAA */
--text-secondary: var(--color-deep-clay); /* 7.5:1 AAA */
--text-tertiary: var(--color-clay-border); /* 4.3:1 lg */
--text-brand: var(--color-deep-clay);
/* Interactive */
--interactive-primary: var(--color-deep-gold); /* 4.7:1 AA */
--interactive-hover: var(--color-antique-gold);
--interactive-brand: var(--color-deep-clay);
--link-color: var(--color-antique-gold); /* 5.6:1 AA */
--link-hover: var(--color-deep-gold);
--focus-ring: var(--color-deep-gold);
/* Borders */
--border-default: rgba(92, 74, 48, 0.12);
--border-hover: rgba(92, 74, 48, 0.25);
--border-strong: rgba(92, 74, 48, 0.40);
/* Semantic states */
--color-success: var(--color-malachite-deep);
--color-success-bg: var(--color-malachite-bg);
--color-success-text: var(--color-malachite-deep);
--color-warning: var(--color-ochre-burnt);
--color-warning-bg: var(--color-ochre-bg);
--color-warning-text: var(--color-ochre-burnt);
--color-danger: var(--color-carnelian-deep);
--color-danger-bg: var(--color-carnelian-bg);
--color-danger-text: var(--color-carnelian-deep);
--color-info: var(--color-egypt-deep);
--color-info-bg: var(--color-egypt-bg);
--color-info-text: var(--color-egypt-deep);
}
/* ============================================================
7. SPACING SCALE — 4px base grid
============================================================ */
:root {
--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 */
}
/* ============================================================
8. LAYOUT & COMPONENT TOKENS
============================================================ */
:root {
/* Border radius */
--radius-sm: 0.25rem; /* 4px — pills, tags */
--radius-md: 0.5rem; /* 8px — buttons, inputs */
--radius-lg: 0.75rem; /* 12px — cards */
--radius-xl: 1rem; /* 16px — modals, panels */
--radius-full: 9999px; /* Circles, full-round */
/* Tablet mark border radius (per Decision 2: rounded rectangle) */
--radius-tablet: 0.563rem; /* 9px — matches Card.html */
/* Shadows — minimal, warm-tinted */
--shadow-sm: 0 1px 3px rgba(6, 14, 26, 0.12);
--shadow-md: 0 4px 12px rgba(6, 14, 26, 0.16);
--shadow-lg: 0 10px 32px rgba(6, 14, 26, 0.24);
/* Max content width */
--max-width-content: 72rem; /* 1152px */
--max-width-narrow: 40rem; /* 640px — forms, auth */
--max-width-reading: 65ch; /* Optimal line length */
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 400ms ease;
/* Z-index scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
}
/* ============================================================
9. BRAND CONSTANTS (reference only — see BRAND_GUIDE.md)
============================================================
Locked decisions from Part 2, Step 2.1
These are comments, not CSS variables, because string
constants can't be read by search engines or screen readers.
Full brand reference lives in docs/BRAND_GUIDE.md
Brand name (EN): Kidab
Brand name (AR): كيداب
Brand meaning: The place that seizes
Tagline: Every stage. Both sides. One place.
Logo: Clay tablet + cuneiform (rounded rectangle primary, broken edges editorial)
Glyph labels: Not in logo, only in brand guide
Primary background: Dark (Night Lapis #0B1A2E)
Trademark: Searched Iraq/MENA — no conflicts
WCAG verified contrast ratios (on Night Lapis #0B1A2E):
- Brand Gold #C69C3E: 6.8:1 — AA pass
- Bright Gold #D4A843: 7.9:1 — AAA pass
- River Sand #E6D2AE: 11.8:1 — AAA pass
============================================================ */
/* ============================================================
10. UTILITY CLASSES
============================================================ */
/* Direction */
[dir="rtl"],
.rtl { direction: rtl; }
[dir="ltr"],
.ltr { direction: ltr; }
/* Arabic font application */
.ar,
[lang="ar"],
[lang="ckb"] {
font-family: var(--font-body-ar);
line-height: var(--lh-body-ar);
}
.ar-display,
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ckb"] h1,
[lang="ckb"] h2,
[lang="ckb"] h3 {
font-family: var(--font-display-ar);
}
/* Cuneiform glyph rendering */
.cuneiform {
font-family: var(--font-cuneiform);
font-size: inherit;
line-height: 1;
}