/* ============================================================================ tokens.css ---------------------------------------------------------------------------- Al-Bashayer · Master design-token file ---------------------------------------------------------------------------- LOAD ORDER: this file MUST be enqueued FIRST, before any other stylesheet. It establishes the entire token vocabulary that every other CSS file (style.css, components.css, dashboard.css, redesign.css, wizard-dr.css, dashboard-dr.css, dark-mode.css, light-theme-v2.css …) consumes by reference. THEME SWITCHING: → light tokens apply → dark tokens apply (default / :root) The anti-FOUC inline script in header.php already sets data-theme on from localStorage('ab-theme') before paint. File map: 1. Shared tokens — fonts, scale, motion, radii 2. Dark theme tokens — :root + [data-theme="dark"] 3. Light theme tokens — [data-theme="light"] 4. Workflow status tokens (both) — request state machine colours 5. Reduced motion override — global prefers-reduced-motion ============================================================================ */ /* ============================================================================ 1 · SHARED TOKENS (identical across both themes) ============================================================================ */ :root { /* ── Typography families ────────────────────────────────────────────── Direction-aware family swapping happens in style.css via: [dir="rtl"] { font-family: var(--font-arabic-body); } [dir="ltr"] { font-family: var(--font-english-body); } so these tokens are theme-independent. ──────────────────────────────────────────────────────────────────── */ --font-arabic-display: 'Amiri', 'Tahoma', serif; --font-arabic-body: 'Cairo', 'Tahoma', sans-serif; --font-english-display: 'Cormorant Garamond', Georgia, serif; --font-english-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; /* ── Fluid type scale (clamp-based) ──────────────────────────────── */ --fs-display: clamp(40px, 4.2vw + 16px, 76px); --fs-h1: clamp(32px, 2.8vw + 16px, 56px); --fs-h2: clamp(26px, 1.8vw + 16px, 40px); --fs-h3: clamp(22px, 1.0vw + 16px, 30px); --fs-h4: clamp(18px, 0.6vw + 14px, 22px); --fs-h5: clamp(16px, 0.3vw + 14px, 18px); --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-label: 11px; --fs-mono: 14px; /* ── Line heights ─────────────────────────────────────────────────── */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --lh-loose: 1.75; /* ── Brand gold — INVARIANT across themes ─────────────────────────── The dark theme's gold (#C8A84B) and the light theme's gold (#B8912A) are intentionally different — shine reads cheap on light. They are declared inside each theme block. This shared --color-gold-brand is a stable mid-tone reference for SVG strokes, gradients, etc. that must match across themes. ──────────────────────────────────────────────────────────────────── */ --color-gold-brand: #B8912A; /* ── Spacing scale (4 px base) ──────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Border radii ────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ── Z-index ladder ──────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 50; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; --z-tooltip: 2000; /* ── Animation durations + easings ───────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-normal: 240ms; --duration-slow: 400ms; --duration-deliberate: 700ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================================ 2 · DARK THEME TOKENS ("Dar Al-Rashid" — preserved & tightened) ---------------------------------------------------------------------------- These are the DEFAULT in :root so any page loaded before the anti-FOUC script runs still gets a sane palette. They are RE-DECLARED inside the explicit [data-theme="dark"] selector so the theme switch works bidirectionally. ============================================================================ */ :root, [data-theme="dark"] { /* ── Section backgrounds ─────────────────────────────────────────── */ --color-hero-bg: #060D09; --color-services-bg: #0B1C12; --color-steps-bg: #112518; --color-trust-bg: #060D09; --color-cta-bg: #0B1C12; --color-footer-bg: #060D09; /* ── Semantic surfaces / text ────────────────────────────────────── */ --color-bg: var(--color-hero-bg); --color-surface: #0E2017; --color-surface-2: #142C20; --color-surface-deep: #1B3A2A; --color-border: #214A36; --color-border-soft: #15301F; --color-border-strong: #3B6A4F; --color-text-primary: #F2EAD6; --color-text-secondary: #C8BEA1; --color-text-muted: #8A7E5E; /* raised from #7A8799 — passes AA on #0E2017 */ --color-text-on-emerald: #F2EAD6; --color-text-on-gold: #0A0904; /* ── Accents ─────────────────────────────────────────────────────── */ --color-accent: #2A7A5F; --color-accent-hover: #36966F; --color-accent-muted: #1A3527; --color-gold: #C8A84B; /* burnished gold for dark backgrounds */ --color-gold-hover: #E2C96A; --color-gold-muted: #2A220D; --color-gold-pale: #F0DFA0; /* ── Feedback ───────────────────────────────────────────────────── */ --color-success: #4ABF82; --color-success-muted: #14322A; --color-warning: #C8A84B; --color-warning-muted: #3A2E12; --color-danger: #C8543A; --color-danger-muted: #3A1A14; --color-info: #4A7AC8; --color-info-muted: #1E2E48; /* ── Shadows (deep, near-opaque for dark surfaces) ─────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65); --shadow-gold-glow: 0 0 0 1px rgba(200, 168, 75, 0.35), 0 14px 32px rgba(200, 168, 75, 0.18); /* ── Legacy --dr-* aliases (preserved for un-migrated markup) ──── */ --dr-bg: var(--color-hero-bg); --dr-bg-2: var(--color-services-bg); --dr-bg-3: var(--color-steps-bg); --dr-bg-light: #F4EDD8; --dr-bg-light-2: #EDE4C8; --dr-gold: var(--color-gold); --dr-gold-light: var(--color-gold-hover); --dr-gold-pale: var(--color-gold-pale); --dr-green: #1D5C42; --dr-green-bright: var(--color-accent); --dr-text: var(--color-text-primary); --dr-text-dark: #1A1208; --dr-text-dark-2: #4A3F2A; } /* ============================================================================ 3 · LIGHT THEME TOKENS ("Dar Al-Rashid Warm" — Option B) ---------------------------------------------------------------------------- These overlay the dark tokens whenever is set. Watermark URLs live in light-theme-v2.css so this file stays text-only. ============================================================================ */ [data-theme="light"] { /* ── Six section backgrounds ────────────────────────────────────── */ --color-hero-bg: #FAF7F0; --color-services-bg: #F2EDE0; --color-steps-bg: #F5E6C8; --color-trust-bg: #EAF0E8; --color-cta-bg: #086348; /* inverted dark strip */ --color-footer-bg: #1C1A16; /* warm charcoal */ /* ── Semantic surfaces / text ────────────────────────────────────── */ --color-bg: var(--color-hero-bg); --color-surface: #FBF6E4; --color-surface-2: #FFFCEF; --color-surface-deep: #E5DAB4; --color-border: #DCCC9A; --color-border-soft: #E8DCB2; --color-border-strong: #B89E5A; --color-text-primary: #1C1A16; /* 15.2 : 1 on canvas · AAA */ --color-text-secondary: #4A3D24; /* 8.4 : 1 on canvas · AAA */ --color-text-muted: #7A6A47; /* 5.0 : 1 on canvas · AA */ --color-text-on-emerald: #FAF7F0; --color-text-on-gold: #1C1A16; /* 4.92 : 1 on gold · AA — fixes v1 fail */ /* ── Accents ─────────────────────────────────────────────────────── */ --color-accent: #086348; --color-accent-hover: #0A7558; --color-accent-muted: #D6E5DA; --color-gold: #B8912A; /* matte burnished — no shine on light */ --color-gold-hover: #C8A04A; --color-gold-muted: #F0E3B5; /* ── Feedback ───────────────────────────────────────────────────── */ --color-success: #1E7A48; --color-success-muted: #C8E0CE; --color-warning: #B8821E; --color-warning-muted: #F4E3B0; --color-danger: #B0321A; --color-danger-muted: #EFCFC4; --color-info: #2C5F9E; --color-info-muted: #D8E1F2; /* ── Shadows (warm-toned, lower opacity for light surfaces) ────── */ --shadow-sm: 0 1px 2px rgba(74, 56, 14, 0.06), 0 1px 1px rgba(74, 56, 14, 0.04); --shadow-md: 0 4px 16px rgba(74, 56, 14, 0.08), 0 1px 2px rgba(74, 56, 14, 0.05); --shadow-lg: 0 18px 40px rgba(74, 56, 14, 0.14), 0 4px 10px rgba(74, 56, 14, 0.06); --shadow-gold-glow: 0 0 0 1px rgba(184, 130, 30, 0.20), 0 12px 28px rgba(184, 130, 30, 0.18); /* ── Legacy --dr-* aliases (preserved for un-migrated markup) ──── */ --dr-bg: var(--color-hero-bg); --dr-bg-2: var(--color-services-bg); --dr-bg-3: var(--color-steps-bg); --dr-bg-light: var(--color-surface); --dr-bg-light-2: var(--color-surface-2); --dr-gold: var(--color-gold); --dr-gold-light: var(--color-gold-hover); --dr-gold-pale: var(--color-gold-muted); --dr-green: var(--color-accent); --dr-green-bright: var(--color-accent-hover); --dr-text: var(--color-text-primary); --dr-text-dark: var(--color-text-primary); --dr-text-dark-2: var(--color-text-secondary); --lt-emerald: var(--color-accent); --lt-cobalt: #2C5F9E; --lt-amethyst: #6B3FA0; --lt-coral: var(--color-danger); } /* ============================================================================ 4 · WORKFLOW STATUS TOKENS (request state machine, both themes) ---------------------------------------------------------------------------- Used by .badge--draft / .badge--pending / .badge--review / .badge--processing .badge--revision / .badge--completed / .badge--rejected in components.css. Triplet per state: bg + fg + dot. ============================================================================ */ /* Light theme status tokens */ [data-theme="light"] { --status-draft-bg: #E8E0C8; --status-draft-fg: #5A4C2A; --status-draft-dot: #8A7544; --status-pending-bg: #F4E3B0; --status-pending-fg: #6A4A0E; --status-pending-dot: #B8821E; --status-review-bg: #D8E1F2; --status-review-fg: #1E3A6E; --status-review-dot: #2C5F9E; --status-processing-bg: #E0D6EE; --status-processing-fg: #4A2A78; --status-processing-dot: #6B3FA0; --status-revision-bg: #F4D8C8; --status-revision-fg: #6A2E10; --status-revision-dot: #B8542A; --status-completed-bg: #C8E0CE; --status-completed-fg: #0E4A2A; --status-completed-dot: #1E7A48; --status-rejected-bg: #EFCFC4; --status-rejected-fg: #7A1F0E; --status-rejected-dot: #B0321A; } /* Dark theme status tokens */ :root, [data-theme="dark"] { --status-draft-bg: #2A2820; --status-draft-fg: #C8BEA1; --status-draft-dot: #8A7E5E; --status-pending-bg: #3A2E12; --status-pending-fg: #F0D078; --status-pending-dot: #C8A84B; --status-review-bg: #1E2E48; --status-review-fg: #A8C0E8; --status-review-dot: #4A7AC8; --status-processing-bg: #2E2244; --status-processing-fg: #C8A8E8; --status-processing-dot: #8A5FC8; --status-revision-bg: #3A2418; --status-revision-fg: #F0B898; --status-revision-dot: #C8744A; --status-completed-bg: #14322A; --status-completed-fg: #8AE0B0; --status-completed-dot: #4ABF82; --status-rejected-bg: #3A1A14; --status-rejected-fg: #F0A89A; --status-rejected-dot: #C8543A; } /* ============================================================================ 5 · REDUCED MOTION (global override) ---------------------------------------------------------------------------- When the user has expressed a preference, kill the hero floating cards, the slow-spin rings, the counter animations, and clamp every transition to effectively instant. Individual components may still opt out, but this is the project-wide floor. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root, [data-theme="dark"], [data-theme="light"] { --duration-instant: 1ms; --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; --duration-deliberate: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } /* Hero ornament & floating cards (assets/js/home.js targets) */ .dr-hero__ring, .dr-hero__floating-card, .dr-hero__star { animation: none !important; transform: none !important; } } /* end of file */