/* ============================================================
   VEESHRAD — Design Tokens
   Single source of truth for ALL visual values.
   Tier 1: primitives (--vsh-*)  — raw values, never used in components
   Tier 2: semantic tokens       — what components actually consume
   Rule: styles.css may ONLY use Tier 2 tokens. No raw hex/px there.
   Naming follows W3C Design Tokens Community Group conventions.
   ============================================================ */
:root{
  /* ---------- Tier 1 · Color primitives ---------- */
  --vsh-charcoal-900:#0D0E10;
  --vsh-charcoal-800:#141518;
  --vsh-charcoal-700:#1A1C20;
  --vsh-gold-500:#C6A15B;
  --vsh-gold-300:#D8BC85;
  --vsh-ivory-100:#F5F1E8;
  --vsh-sand-400:#9B948A;
  --vsh-green-whatsapp:#25D366;
  --vsh-white:#FFFFFF;
  --vsh-bronze-900:#17130C;
  --vsh-blue-300:#7EC8FF;
  --vsh-green-300:#7EE2A8;
  --vsh-red-300:#FF9B9B;
  --vsh-gray-500:#999999;

  /* ---------- Tier 2 · Semantic colors ---------- */
  --color-bg-page:var(--vsh-charcoal-900);
  --color-bg-surface:var(--vsh-charcoal-800);
  --color-bg-card:var(--vsh-charcoal-700);
  --color-bg-feature-gradient:linear-gradient(135deg,var(--vsh-bronze-900),var(--vsh-charcoal-800));
  --color-accent:var(--vsh-gold-500);
  --color-accent-soft:var(--vsh-gold-300);
  --color-accent-gradient:linear-gradient(135deg,var(--vsh-gold-500),var(--vsh-gold-300));
  --color-text-primary:var(--vsh-ivory-100);
  --color-text-muted:var(--vsh-sand-400);
  --color-text-on-accent:var(--vsh-charcoal-800);
  --color-border-subtle:rgba(198,161,91,.14);
  --color-border-medium:rgba(198,161,91,.3);
  --color-border-strong:rgba(198,161,91,.5);
  --color-cta-whatsapp:var(--vsh-green-whatsapp);
  --color-overlay-nav:rgba(13,14,16,.86);
  --color-status-info:var(--vsh-blue-300);
  --color-status-success:var(--vsh-green-300);
  --color-status-error:var(--vsh-red-300);
  --color-status-neutral:var(--vsh-gray-500);

  /* ---------- Typography ---------- */
  --font-family-base:'Tajawal',sans-serif;
  --font-family-display:'Marcellus',serif;
  --font-size-xs:.75rem;
  --font-size-sm:.875rem;
  --font-size-md:1rem;
  --font-size-lg:1.15rem;
  --font-size-xl:1.35rem;
  --font-size-2xl:1.6rem;
  --font-size-price:2rem;
  --font-size-display-sm:clamp(1.6rem,3.5vw,2.4rem);
  --font-size-display-lg:clamp(2.2rem,5.5vw,3.6rem);
  --font-size-step-number:3.4rem;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
  --font-weight-heavy:800;
  --line-height-base:1.7;
  --line-height-tight:1.25;
  --letter-spacing-wide:.15em;
  --letter-spacing-logo:.22em;

  /* ---------- Spacing (4px base scale) ---------- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-7:28px;  --space-8:32px;
  --space-9:40px;  --space-10:48px; --space-11:56px; --space-12:64px;
  --space-14:80px; --space-16:96px; --space-18:112px;

  /* ---------- Radii ---------- */
  --radius-md:14px;
  --radius-pill:99px;
  --radius-round:50%;

  /* ---------- Shadows ---------- */
  --shadow-cta:0 10px 30px rgba(198,161,91,.35);
  --shadow-float:0 8px 24px rgba(0,0,0,.45);
  --shadow-feature-glow:0 0 40px rgba(198,161,91,.12);

  /* ---------- Layout ---------- */
  --layout-max-width:1120px;
  --layout-gutter:22px;
  --layout-nav-height:68px;
  /* Breakpoints (CSS cannot read vars in @media — keep in sync manually):
     --breakpoint-md:820px;  --breakpoint-lg:900px; */
  --breakpoint-md:820px;
  --breakpoint-lg:900px;

  /* ---------- Motion ---------- */
  --motion-fast:.2s;
  --motion-medium:.25s;

  /* ---------- Z-index scale ---------- */
  --z-nav:50;
  --z-float:60;

  /* ---------- Component sizes ---------- */
  --size-icon-sm:20px;
  --size-icon-md:30px;
  --size-fab:58px;
  --size-touch-target:44px; /* WCAG minimum touch target */

  /* ---------- Responsive tokens (adapt per breakpoint below) ---------- */
  --space-section:var(--space-14);
  --space-hero-top:var(--space-18);
  --space-card-y:var(--space-8);
  --space-card-x:var(--space-7);
  --space-grid-gap:var(--space-5);
}

/* Tablet (≤ breakpoint-lg): tighten grids and cards */
@media (max-width:1024px){
  :root{
    --space-card-y:var(--space-6);
    --space-card-x:var(--space-5);
    --space-grid-gap:var(--space-4);
  }
}

/* Mobile (≤ breakpoint-md): compress vertical rhythm */
@media (max-width:820px){
  :root{
    --space-section:var(--space-11);
    --space-hero-top:var(--space-14);
  }
}