/* ============================================================================
   Sukoon | सुकून — Design Tokens (CSS custom properties)
   Source of truth: docs/06-DESIGN-SYSTEM.md  (front-matter token set)
   Loaded first on every page; consumed by components.css, page CSS and inline
   styles. tailwind.config.js mirrors these so utilities (bg-primary, text-gold…)
   resolve to the same values.
   ============================================================================ */

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --sk-primary:        #4B1E6D;   /* Deep Purple */
  --sk-primary-deep:   #371552;
  --sk-primary-soft:   #6E3C92;
  --sk-primary-50:     #F4EEF9;
  --sk-on-primary:     #FFFFFF;

  --sk-gold:           #D4AF37;   /* Royal Gold */
  --sk-gold-deep:      #B8941F;
  --sk-gold-soft:      #E7CE72;

  --sk-saffron:        #F59E0B;   /* Saffron — primary action / energy */
  --sk-saffron-deep:   #D97706;
  --sk-saffron-soft:   #FCD68A;
  --sk-on-saffron:     #3A2A06;

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --sk-canvas:         #FFFFFF;
  --sk-surface:        #FAFAF7;   /* off-white page base */
  --sk-cream:          #FBF7EF;   /* light cream sections */
  --sk-cream-deep:     #F3EADC;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --sk-ink:            #2D2A32;
  --sk-ink-soft:       #5A5560;
  --sk-ink-muted:      #8A8590;
  --sk-ink-faint:      #B8B4BE;

  /* ── Lines / borders ─────────────────────────────────────────────────── */
  --sk-hairline:        #ECE8F0;
  --sk-hairline-strong: #D9D3E2;

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --sk-success:        #2E9E5B;
  --sk-warning:        #E0A100;
  --sk-danger:         #D14343;
  --sk-info:           #3B82F6;
  --sk-link:           #6E3C92;
  --sk-rating-star:    #F59E0B;

  /* ── Glass ───────────────────────────────────────────────────────────── */
  --sk-glass-fill:        rgba(255, 255, 255, 0.65);
  --sk-glass-fill-dark:   rgba(75, 30, 109, 0.55);
  --sk-glass-border:      rgba(255, 255, 255, 0.40);

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --sk-grad-hero:   linear-gradient(135deg, var(--sk-primary) 0%, var(--sk-primary-soft) 60%, var(--sk-saffron-deep) 130%);
  --sk-grad-gold:   linear-gradient(90deg, transparent, var(--sk-gold), transparent);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --sk-font-en: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-font-hi: "Noto Sans Devanagari", "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — fluid via clamp(min, preferred, max). Scales smoothly
     320px → 2560px with no fixed jumps. Min = mobile, max = desktop value.
     Weight pairing (BMW-discipline applied to Poppins): display 700, body 400. */
  --sk-fs-hero:     clamp(36px, 6.2vw, 64px);   --sk-lh-hero:    1.08;
  --sk-fs-display:  clamp(30px, 4.6vw, 48px);   --sk-lh-display: 1.12;
  --sk-fs-h1:       clamp(27px, 3.4vw, 36px);   --sk-lh-h1:      1.18;
  --sk-fs-h2:       clamp(23px, 2.6vw, 28px);   --sk-lh-h2:      1.22;
  --sk-fs-h3:       clamp(20px, 1.9vw, 22px);   --sk-lh-h3:      1.30;
  --sk-fs-h4:       clamp(17px, 1.4vw, 18px);   --sk-lh-h4:      1.35;
  --sk-fs-subtitle: clamp(16px, 1.4vw, 18px);   --sk-lh-subtitle:1.55;
  --sk-fs-body-lg:  clamp(16px, 1.2vw, 17px);   --sk-lh-body-lg: 1.60;
  --sk-fs-body:     15px;                        --sk-lh-body:    1.60;
  --sk-fs-sm:       13px;                        --sk-lh-sm:      1.50;
  --sk-fs-caption:  12px;                        --sk-lh-caption: 1.40;
  --sk-fs-price:    clamp(20px, 1.8vw, 22px);

  /* Display/body weight pair — use these so the contrast stays consistent. */
  --sk-fw-display:  700;
  --sk-fw-heading:  600;
  --sk-fw-medium:   500;
  --sk-fw-body:     400;
  /* Tracking for machined uppercase labels (BMW signature, brand-adapted). */
  --sk-tracking-label: 1.2px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --sk-r-xs:   6px;
  --sk-r-sm:   10px;
  --sk-r-md:   14px;
  --sk-r-lg:   18px;   /* default card radius */
  --sk-r-xl:   24px;
  --sk-r-xxl:  32px;
  --sk-r-full: 9999px;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sk-sp-xxs:  4px;
  --sk-sp-xs:   8px;
  --sk-sp-sm:   12px;
  --sk-sp-md:   16px;
  --sk-sp-lg:   20px;
  --sk-sp-xl:   24px;
  --sk-sp-xxl:  32px;
  --sk-sp-xxxl: 48px;
  --sk-sp-section:    80px;
  --sk-sp-section-lg: 120px;

  /* ── Shadow / elevation ──────────────────────────────────────────────── */
  /* Layered, low-opacity shadows (Stripe/Linear feel): a tight contact shadow
     plus a soft ambient one. Reads premium without the "heavy drop-shadow" look. */
  --sk-shadow-xs:        0 1px 2px rgba(45, 42, 50, 0.05);
  --sk-shadow-sm:        0 1px 2px rgba(45, 42, 50, 0.05), 0 2px 6px rgba(45, 42, 50, 0.05);
  --sk-shadow-md:        0 2px 4px rgba(45, 42, 50, 0.04), 0 8px 20px rgba(45, 42, 50, 0.07);
  --sk-shadow-lg:        0 4px 10px rgba(45, 42, 50, 0.05), 0 18px 40px rgba(75, 30, 109, 0.12);
  --sk-shadow-xl:        0 8px 20px rgba(45, 42, 50, 0.06), 0 28px 60px rgba(75, 30, 109, 0.16);
  --sk-shadow-gold:      0 6px 24px rgba(212, 175, 55, 0.26);
  --sk-shadow-purple:    0 10px 30px rgba(75, 30, 109, 0.28);

  /* ── Focus ring (WCAG AA visible focus) ──────────────────────────────── */
  --sk-focus-ring:     0 0 0 3px var(--sk-primary-50), 0 0 0 4px var(--sk-primary-soft);
  --sk-focus-outline:  2px solid var(--sk-primary);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --sk-motion-fast: 150ms ease;
  --sk-motion-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --sk-motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sk-container: 1200px;
  --sk-navbar-h:  72px;
  --sk-bottomnav-h: 56px;   /* mobile sticky bottom nav (≤768px); drives content clearance */
}

/* Respect reduced-motion globally (design system requirement). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-motion-fast: 0ms;
    --sk-motion-base: 0ms;
    --sk-motion-slow: 0ms;
  }
}