/* tokens.css — BIMI Consultancy · design1a. Slot names per canada-hitech-engineering §1.
   Colour VALUES live in theme.css (loaded next), so design1b is a theme swap, not a rebuild. */

:root {
    /* BRAND COLORS */
    --color-primary:      var(--shade-olive);
    --color-primary-deep: var(--shade-olive-deep);
    --color-primary-soft: var(--shade-olive-soft);
    --color-accent:       var(--shade-gold);
    --color-accent-deep:  var(--shade-gold-deep);

    /* NEUTRALS */
    --color-text:         var(--shade-umber);
    --color-text-muted:   var(--shade-taupe);
    --color-text-inverse: var(--shade-parchment);
    --color-bg:           var(--shade-white);
    --color-surface:      var(--shade-cream);
    --color-border:       var(--shade-line);

    /* SEMANTIC COLORS */
    --color-success: #2e6b3f;  --color-warning: #8a5a00;
    --color-danger:  #a3261b;  --color-info:    #2d5b78;

    /* TYPOGRAPHY — primary (Almarai): titles, subtitles, interface labels · secondary (IBM Plex Sans Arabic): normal text only */
    --font-primary:   'Almarai', 'Arial', sans-serif;
    --font-secondary: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
    --font-heading: var(--font-primary);  --font-body: var(--font-secondary);
    --font-mono:    ui-monospace, "SF Mono", 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 (project shape scale lives in theme.css) */
    --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 — colour roles */
    --color-heading:       var(--shade-espresso);   --color-accent-bright: var(--shade-gold-bright);  --color-accent-hover: var(--shade-gold-hover);
    --color-surface-sand:  var(--shade-sand);       --color-surface-gold:  var(--shade-gold-tint);
    --color-border-strong: var(--shade-line-strong); --color-logo-light:   var(--shade-sage);
    --color-footer-bg:     var(--shade-espresso);   --color-footer-text:   var(--shade-parchment);
    --color-footer-muted:  var(--shade-footer-muted); --color-footer-accent: var(--shade-footer-gold);
    --color-footer-line:   var(--shade-footer-line); --color-panel:        var(--shade-panel);
    --color-backdrop:      var(--shade-backdrop);   --shadow-header:       var(--shade-shadow-header);  --shadow-glow: var(--shade-gold-glow);  --shadow-focus-gold: var(--shade-gold-focus);  --color-sheen: var(--shade-gold-sheen);

    /* PROJECT — typography */
    --fs-hero: clamp(28px, 3.6vw, var(--fs-3xl));  --fs-h2: clamp(var(--fs-xl), 3.2vw, 40px);
    --fs-h3:   clamp(var(--fs-lg), 1.7vw, var(--fs-xl));  --lh-body: 1.8;  --lh-heading: 1.4;  --measure: 68ch;

    /* PROJECT — layout and component dimensions */
    --container-max: 1280px;  --container-narrow: 800px;  --gutter: clamp(16px, 4vw, 40px);
    --header-size: 59.2px;  --header-size-lg: 72px;  --tap: 44px;  --btn-size: 48px;  --drawer-size: 360px;  --logo-drawer: 128px;
    --logo-ratio: calc(522 / 97);  --logo-width: calc((var(--header-size) - 16px) * var(--logo-ratio));  --logo-width-lg: calc((var(--header-size-lg) - 16px) * var(--logo-ratio));
    --hero-min: 480px;  --hero-max: 760px;  --hero-panel: 580px;  --hero-panel-xl: 640px;
    --icon-sm: 18px;  --icon-md: 24px;  --icon-lg: 28px;  --icon-card-scale: 2;  --mark-size: 72px;

    /* PROJECT — motion and layers (z-index convention: engineering §12 Fix 7) */
    --duration-slide: 600ms;  --duration-reveal: 600ms;  --duration-drawer: 300ms;  --duration-sheen: 900ms;  --reveal-distance: 20px;  --lift: -4px;
    --z-raised: 10;  --z-dropdown: 100;  --z-sticky: 200;  --z-overlay: 500;  --z-toast: 900;  --z-skip: 9999;
}