/* =========================================================================
   tokens.css — ETQAN THAHABI · design1a theme layer
   The only file that holds raw colour values. A "1b" variation is a swap
   of this file; structure and components never change.

   GOLD — sampled from images/logo/logo-4.svg (embedded 4096x978 PNG,
   1,384,312 metallic-face pixels; median-cut 8 colours + lightness bands).
   Median-cut palette: #C0913C #D0A44F #DEB360 #E3BA68 #E4BC69 #F0D17B #F4E18F
     deep p10 #BE8F3A · core p50 #E3BA68 (largest cluster, 20%) · highlight p92 #F4E190
   BLACKS — warm ladder; CIEDE2000 between steps 3.20 / 3.95 / 4.26;
   max relative luminance 0.026 (brief ceiling 0.12). Every text pair is
   measured in html/_qa/design1a/phase1/palette.md (all pass WCAG AA).

   FONTS — Sora (display) + IBM Plex Sans (body): OFL, self-hosted WOFF2,
   Latin subset (see base.css). Arabic phase — not loaded now:
   IBM Plex Sans Arabic (same superfamily as the body face, design skill
   §14 "safest bilingual pair"); Noto Kufi Arabic for headings if a more
   geometric voice is wanted to echo Sora.
   ========================================================================= */

:root {
    /* BRAND COLORS */
    --color-primary:          #E3BA68;
    --color-primary-deep:     #BE8F3A;
    --color-primary-soft:     rgb(227 186 104 / 0.24);
    --color-accent:           #E3BA68;
    --color-accent-deep:      #BE8F3A;
    --color-accent-highlight: #F4E190;
    --color-accent-wash:      rgb(227 186 104 / 0.08);
    --gradient-gold:          linear-gradient(105deg, #BE8F3A 0%, #E3BA68 30%, #F4E190 50%, #E3BA68 70%, #BE8F3A 100%);
    --gradient-gold-rule:     linear-gradient(90deg, rgb(227 186 104 / 0) 0%, #E3BA68 50%, rgb(227 186 104 / 0) 100%);

    /* NEUTRALS */
    --color-text:           #F5F0E6;
    --color-text-muted:     #B3AA9C;
    --color-text-inverse:   #080706;
    --color-bg:             #080706;
    --color-surface:        #16130F;
    --color-surface-2:      #231F1A;
    --color-surface-3:      #312C25;
    --color-border:         rgb(227 186 104 / 0.24);
    --color-border-subtle:  rgb(227 186 104 / 0.12);
    --color-border-strong:  #E3BA68;

    /* SEMANTIC COLORS — red is reserved for errors and destructive states */
    --color-success: #58C28E;  --color-warning: #F0A04B;
    --color-danger:  #F26A6E;  --color-info:    #6FB4EE;

    /* OVERLAYS, SCRIMS, GLOWS */
    --color-header:        rgb(22 19 15 / 0.96);
    --color-backdrop:      rgb(8 7 6 / 0.72);
    --color-photo-tint:    rgb(190 143 58 / 0.16);
    --shadow-glow-gold:    0 22px 44px -26px rgb(227 186 104 / 0.55);
    --shadow-ring-gold:    0 0 0 var(--hairline) var(--color-border-strong);
    --shadow-deep:         0 24px 60px rgb(0 0 0 / 0.55);
    --gradient-scrim-hero: linear-gradient(var(--dir-angle), rgb(8 7 6 / 0.94) 0%, rgb(8 7 6 / 0.80) 36%, rgb(8 7 6 / 0.34) 70%, rgb(8 7 6 / 0.20) 100%),
                           linear-gradient(0deg, rgb(8 7 6 / 0.92) 0%, rgb(8 7 6 / 0) 36%);
    --gradient-scrim-hero-compact: linear-gradient(0deg, rgb(8 7 6 / 0.96) 0%, rgb(8 7 6 / 0.92) 76%, rgb(8 7 6 / 0.74) 90%, rgb(8 7 6 / 0.52) 100%);
    --gradient-vignette:   radial-gradient(125% 100% at 50% 40%, rgb(8 7 6 / 0) 52%, rgb(8 7 6 / 0.55) 100%);
    --gradient-glow-gold:  radial-gradient(60% 120% at 50% 0%, rgb(227 186 104 / 0.10) 0%, rgb(227 186 104 / 0) 70%);
    --gradient-gold-solid: linear-gradient(#E3BA68, #E3BA68);
    --gradient-fade-bottom: linear-gradient(0deg, #080706 0%, rgb(8 7 6 / 0) 45%);
    --gradient-scrim-band: linear-gradient(calc(var(--dir-angle) + 180deg), rgb(8 7 6 / 0.90) 0%, rgb(8 7 6 / 0.62) 42%, rgb(8 7 6 / 0.18) 100%),
                           linear-gradient(180deg, rgb(8 7 6 / 0.75) 0%, rgb(8 7 6 / 0) 18%, rgb(8 7 6 / 0) 82%, rgb(8 7 6 / 0.75) 100%);
    --color-panel:         rgb(22 19 15 / 0.86);
    --color-scrim-badge:   rgb(8 7 6 / 0.78);

    /* TYPOGRAPHY */
    --font-heading: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-body:    "IBM Plex Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* SPACING — universal, do not change */
    --space-xs:   4px;   --space-sm:   8px;
    --space-md:  16px;   --space-lg:  24px;
    --space-xl:  32px;   --space-2xl: 48px;
    --space-3xl: 64px;

    /* RADIUS — universal */
    --radius-sm:   4px;  --radius-md:   8px;
    --radius-lg:  16px;  --radius-pill: 999px;

    /* TYPE SCALE — universal */
    --fs-xs:  12px;  --fs-sm:  14px;  --fs-md:   16px;
    --fs-lg:  18px;  --fs-xl:  24px;  --fs-2xl:  32px;
    --fs-3xl: 48px;  --fs-4xl: 64px;

    /* SHADOWS — universal */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 24px rgba(0,0,0,.12);

    /* TRANSITIONS — universal */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* BREAKPOINTS — reference values (cannot be used in @media)
       sm 576 | md 768 | lg 992 | xl 1200 | 2xl 1440 */

    /* ---- Project tokens ------------------------------------------------ */

    /* Spacing additions */
    --space-4xl: 96px;  --space-5xl: 128px;
    --section-pad: clamp(64px, 9vw, 128px);
    --container-pad: clamp(16px, 4vw, 40px);
    --focus-offset: 3px;

    /* Shape — design1a: 8px cards, 4px buttons (cards revised from sharp on review; 1b swaps these) */
    --radius-sharp: 0;  --radius-soft: 4px;
    --radius-card: var(--radius-md);  --radius-button: var(--radius-soft);

    /* Type additions */
    --fs-numeral: clamp(40px, 5vw, 56px);
    --lh-tight: 1.12;  --lh-snug: 1.3;  --lh-body: 1.65;
    --tracking-display: -0.022em;  --tracking-button: 0.02em;  --tracking-label: 0.18em;
    --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;

    /* Motion additions — eased, never linear */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-timer: cubic-bezier(0.3, 0.05, 0.7, 0.95);
    --duration-reveal: 700ms;  --stagger: 80ms;  --duration-drawer: 300ms;  --duration-bounce: 1800ms;
    --duration-slide-fade: 800ms;  --duration-slide-zoom: 3800ms;  --slider-interval: 3000ms;

    /* Layers — engineering Fix 7 convention */
    --z-base: 0;  --z-raised: 10;  --z-dropdown: 100;  --z-header: 200;
    --z-overlay: 500;  --z-toast: 900;  --z-skip: 9999;

    /* Layout and sizes */
    --container-max: 1280px;  --container-wide: 1440px;  --container-narrow: 800px;
    --utility-bar-height: 44px;  --header-height: 74px;  --header-height-compact: 58px;
    --logo-height: 40px;  --logo-height-compact: 32px;  --logo-height-footer: 36px;  --drawer-width: 400px;
    --hairline: 1px;  --rule: 2px;  --kicker-width: 48px;  --touch-target: 44px;
    /* buttons are 4-6px shorter than the 44px tap minimum; the hit area keeps the 44px */
    --btn-height: 40px;  --btn-height-lg: 46px;
    --icon-xs: 14px;  --icon-sm: 16px;  --icon-md: 20px;  --icon-lg: 24px;  --icon-xl: 32px;
    /* borderless card icon — twice --icon-xl (client revision, 2026-09-20) */
    --icon-2xl: 64px;
    --hero-height: 720px;  --band-min-height: clamp(640px, 88vh, 880px);
    --corner-size: 28px;  --blur-panel: 14px;

    /* Direction — mirrored for RTL */
    --dir-angle: 90deg;  --dir-sign: 1;
}

[dir="rtl"] {
    --dir-angle: 270deg;  --dir-sign: -1;
}