/* ─────────────────────────────────────────────────────
   OSUS Design Tokens
   Source: OSUS Digital Experience System V2.1
   ───────────────────────────────────────────────────── */

:root {

  /* ── Brand Colors ───────────────────────────────── */
  --navy:     #0F2837;
  --sage:     #91B9B4;
  --orange:   #FF9619;
  --burgundy: #6E1946;

  /* ── Derived from brand ─────────────────────────── */
  --navy-95:   rgba(15, 40, 55, 0.95);
  --navy-90:   rgba(15, 40, 55, 0.90);
  --navy-80:   rgba(15, 40, 55, 0.80);
  --navy-60:   rgba(15, 40, 55, 0.60);
  --navy-40:   rgba(15, 40, 55, 0.40);
  --navy-20:   rgba(15, 40, 55, 0.20);
  --navy-10:   rgba(15, 40, 55, 0.10);
  --navy-05:   rgba(15, 40, 55, 0.05);

  --sage-80:   rgba(145, 185, 180, 0.80);
  --sage-40:   rgba(145, 185, 180, 0.40);
  --sage-20:   rgba(145, 185, 180, 0.20);
  --sage-10:   rgba(145, 185, 180, 0.10);

  --orange-90: rgba(255, 150, 25, 0.90);
  --orange-80: rgba(255, 150, 25, 0.80);
  --orange-60: rgba(255, 150, 25, 0.60);
  --orange-40: rgba(255, 150, 25, 0.40);
  --orange-20: rgba(255, 150, 25, 0.20);
  --orange-10: rgba(255, 150, 25, 0.10);
  --orange-05: rgba(255, 150, 25, 0.05);

  --burgundy-80: rgba(110, 25, 70, 0.80);
  --burgundy-60: rgba(110, 25, 70, 0.60);
  --burgundy-40: rgba(110, 25, 70, 0.40);
  --burgundy-20: rgba(110, 25, 70, 0.20);
  --burgundy-10: rgba(110, 25, 70, 0.10);
  --burgundy-05: rgba(110, 25, 70, 0.05);

  --sage-60:   rgba(145, 185, 180, 0.60);
  --sage-05:   rgba(145, 185, 180, 0.05);

  /* ── Neutral Palette ────────────────────────────── */
  /* Warm White — derived from navy with warmth, NOT grey */
  --warm-white:  #F8F6F3;
  --warm-white-2: #F0EDE9;
  --warm-200:    #E8E4DF;
  --warm-300:    #D4CFC8;
  --warm-400:    #B0A99F;

  /* Text shades derived from navy */
  --text-primary:    #0F2837;
  --text-secondary:  #3D5A6C;
  --text-tertiary:   #6B8A9A;
  --text-on-dark:    #F8F6F3;
  --text-on-orange:  #0F2837;

  /* ── Semantic ───────────────────────────────────── */
  --color-success: #2E7D5A;
  --color-warning: #C07900;
  --color-error:   #C0392B;
  --color-info:    var(--sage);

  /* ── Typography ─────────────────────────────────── */
  --font-arabic: "IBM Plex Sans Arabic", "DIN Next Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-numbers: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  /* Type scale (fluid) */
  --text-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 1.8vw, 0.9375rem);
  --text-base: clamp(1rem,     2vw,   1.0625rem);
  --text-lg:   clamp(1.125rem, 2.2vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   3vw,   2rem);
  --text-3xl:  clamp(1.875rem, 4vw,   2.5rem);
  --text-4xl:  clamp(2.25rem,  5vw,   3.25rem);
  --text-5xl:  clamp(2.75rem,  6vw,   4.25rem);
  --text-6xl:  clamp(3.25rem,  7.5vw, 5.5rem);

  /* Type weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing (Arabic — minimal) */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* ── Spacing ────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  /* Section padding */
  --section-py: clamp(4rem, 8vw, 7rem);
  --section-py-lg: clamp(5rem, 10vw, 9rem);

  /* ── Radii ──────────────────────────────────────── */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 9999px;

  /* ── Borders ────────────────────────────────────── */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  3px;

  --border-color:       var(--warm-200);
  --border-color-dark:  var(--navy-20);
  --border-color-light: rgba(248, 246, 243, 0.15);

  /* ── Shadows ────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(15, 40, 55, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 40, 55, 0.10);
  --shadow-md: 0 4px 20px rgba(15, 40, 55, 0.12);
  --shadow-lg: 0 8px 40px rgba(15, 40, 55, 0.15);
  --shadow-xl: 0 16px 60px rgba(15, 40, 55, 0.20);
  --shadow-orange: 0 8px 32px rgba(255, 150, 25, 0.30);
  --shadow-navy: 0 8px 32px rgba(15, 40, 55, 0.40);
  --shadow-inset: inset 0 1px 3px rgba(15, 40, 55, 0.10);

  /* ── Z-index Layers ─────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-header:  50;
  --z-overlay: 100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-cursor:  500;

  /* ── Motion ─────────────────────────────────────── */
  --duration-instant:  50ms;
  --duration-fast:     150ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   800ms;
  --duration-slowest:  1200ms;

  /* Enterprise easing — informed by reference file "Enterprise Motion" */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-sharp:      cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gentle:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Containers ─────────────────────────────────── */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-3xl: 1600px;

  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* ── Unified hero spacing system (all hero sections share these) ── */
  --osus-container-max: var(--container-2xl);      /* 1440px — one hero content width  */
  --osus-page-x:        var(--container-padding);  /* same inline inset as site content */
  --osus-hero-top:      clamp(6rem, 11vh, 8.5rem); /* top rhythm after header           */
  --osus-hero-bottom:   clamp(4rem, 8vh, 6rem);    /* bottom rhythm before next section */

  /* ── Breakpoints (as custom media - reference only) */
  /* mobile: <768 | tablet: 768-1024 | desktop: >1024 */

  /* ── Header ─────────────────────────────────────── */
  --header-height:        72px;
  --header-height-scroll: 60px;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-slowest: 0ms;
  }
}

/* ─────────────────────────────────────────────────────
   Category logo images (replace emoji icons)
   ───────────────────────────────────────────────────── */
.category-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Product card logos — individual product identity (42 px) */
.product-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Community tile logos — medium size */
img.comm-tile__icon.category-logo {
  width: 36px;
  height: 36px;
  display: block;
}