/* ============================================
   VIBHUSHA DESIGN TOKENS
   Brand: Indian Home Textile | Rajasthani Elegance
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── COLOUR PALETTE ─── */
  --navy:          #1a2744;
  --navy-deep:     #111b35;
  --navy-light:    #253358;
  --gold:          #b8952a;
  --gold-light:    #d4af5a;
  --gold-pale:     #f0e4b8;
  --gold-dark:     #8a6e1a;
  --ivory:         #faf7f2;
  --ivory-dark:    #f0ebe2;
  --ivory-mid:     #e8e1d6;
  --magenta:       #b5336a;
  --magenta-light: #d4557e;
  --magenta-pale:  #f7e5ec;
  --turquoise:     #2a7c8a;
  --turquoise-light:#3fa0b0;
  --turquoise-pale: #e0f0f4;
  --charcoal:      #2c2c2c;
  --charcoal-mid:  #555555;
  --charcoal-light:#888888;
  --white:         #ffffff;
  --success:       #2d7a3e;
  --error:         #c0392b;

  /* ─── SEMANTIC TOKENS ─── */
  --color-bg:          var(--ivory);
  --color-bg-alt:      var(--ivory-dark);
  --color-bg-card:     var(--white);
  --color-bg-navy:     var(--navy);
  --color-text-primary: var(--navy);
  --color-text-body:   var(--charcoal);
  --color-text-muted:  var(--charcoal-mid);
  --color-text-faint:  var(--charcoal-light);
  --color-text-inverse:var(--ivory);
  --color-border:      var(--ivory-mid);
  --color-border-gold: var(--gold);
  --color-accent:      var(--magenta);
  --color-accent2:     var(--turquoise);

  /* ─── TYPOGRAPHY ─── */
  --font-serif:   'Cormorant Garamond', 'Georgia', serif;
  --font-sans:    'Manrope', 'Inter', system-ui, sans-serif;

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

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.75;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ─── SPACING ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-section: 100px;

  /* ─── LAYOUT ─── */
  --max-width:       1440px;
  --content-width:   1280px;
  --nav-height:      72px;
  --gutter-desktop:  48px;
  --gutter-tablet:   32px;
  --gutter-mobile:   20px;

  /* ─── BORDER RADIUS ─── */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─── */
  --shadow-sm:  0 1px 3px rgba(26,39,68,0.07);
  --shadow-md:  0 4px 16px rgba(26,39,68,0.09);
  --shadow-lg:  0 8px 32px rgba(26,39,68,0.12);
  --shadow-xl:  0 20px 60px rgba(26,39,68,0.16);
  --shadow-card:0 2px 12px rgba(26,39,68,0.08);

  /* ─── TRANSITIONS ─── */
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:     cubic-bezier(0, 0.55, 0.45, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ─── Z-INDEX ─── */
  --z-below:  -1;
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     500;
}