/* ============================================================
   CK Cloth Hangers — Design Tokens / CSS Custom Properties
   ============================================================ */

:root {
  /* ── Brand Colours ───────────────────────────────────────── */
  --clr-primary:        #0d2b55;   /* Deep navy blue */
  --clr-primary-dark:   #091e3e;
  --clr-primary-light:  #1a4080;
  --clr-secondary:      #ffffff;   /* White */
  --clr-accent:         #f5a623;   /* Golden yellow */
  --clr-accent-dark:    #d4891a;
  --clr-accent-light:   #ffc04d;

  /* ── Neutral Palette ─────────────────────────────────────── */
  --clr-bg:             #f4f6fa;   /* Light grey page background */
  --clr-bg-white:       #ffffff;
  --clr-bg-dark:        #0d2b55;
  --clr-surface:        #ffffff;
  --clr-border:         #dde3ef;
  --clr-text:           #1a1f2e;   /* Near-black */
  --clr-text-muted:     #5a6478;
  --clr-text-light:     #8a94a6;
  --clr-text-white:     #ffffff;
  --clr-text-on-accent: #0d2b55;

  /* ── Semantic Colours ────────────────────────────────────── */
  --clr-success:        #1db954;
  --clr-error:          #e53e3e;
  --clr-warning:        #f5a623;
  --clr-info:           #3182ce;

  /* ── WhatsApp / Phone ────────────────────────────────────── */
  --clr-whatsapp:       #25D366;
  --clr-whatsapp-dark:  #1da851;
  --clr-call:           #0d2b55;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Outfit', var(--font-sans);

  --fs-xs:    0.75rem;    /*  12px */
  --fs-sm:    0.875rem;   /*  14px */
  --fs-base:  1rem;       /*  16px */
  --fs-md:    1.125rem;   /*  18px */
  --fs-lg:    1.25rem;    /*  20px */
  --fs-xl:    1.5rem;     /*  24px */
  --fs-2xl:   1.875rem;   /*  30px */
  --fs-3xl:   2.25rem;    /*  36px */
  --fs-4xl:   3rem;       /*  48px */
  --fs-5xl:   3.75rem;    /*  60px */

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

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

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(13, 43, 85, 0.06);
  --shadow-sm:   0 2px 8px rgba(13, 43, 85, 0.08);
  --shadow-md:   0 4px 16px rgba(13, 43, 85, 0.12);
  --shadow-lg:   0 8px 32px rgba(13, 43, 85, 0.16);
  --shadow-xl:   0 16px 48px rgba(13, 43, 85, 0.20);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  --header-height:  72px;

  /* ── Shine & Metallic Tokens ─────────────────────────────── */
  --grad-shine:         linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.4) 55%, transparent 80%);
  --grad-gold-shine:    linear-gradient(120deg, #f5a623 0%, #fff7d6 30%, #f5a623 50%, #ffc04d 75%, #ffffff 88%, #d4891a 100%);
  --grad-steel-shine:   linear-gradient(135deg, #dbe4ee 0%, #ffffff 30%, #9cb0c6 50%, #f8fafc 75%, #889bb0 100%);
  --grad-hero-glow:     radial-gradient(ellipse at 75% 35%, rgba(245, 166, 35, 0.18) 0%, rgba(26, 64, 128, 0.4) 40%, transparent 70%);

  --shadow-shine-accent:  0 0 24px rgba(245, 166, 35, 0.45), 0 4px 16px rgba(245, 166, 35, 0.35);
  --shadow-shine-wa:      0 0 24px rgba(37, 211, 102, 0.45), 0 4px 16px rgba(37, 211, 102, 0.3);
  --shadow-shine-primary: 0 0 28px rgba(26, 64, 128, 0.45), 0 6px 20px rgba(13, 43, 85, 0.3);
  --shadow-steel-shine:   0 8px 32px rgba(13, 43, 85, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.7);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-float:    600;
}