/**
 * SRS DIGITAL CATALOGUE v2 - DESIGN SYSTEM TOKENS
 * Extracted directly from www.srschuruwala.com
 */

:root {
  /* ==========================================================================
     1. COLOR PALETTE
     ========================================================================== */
  
  /* Primary Heritage Teals */
  --srs-teal-deep:      #123F42; /* Primary Heritage Teal (Main Brand Color) */
  --srs-teal-header:    #123F42; /* Header uses primary heritage teal */
  --srs-teal-surface:   #174E55; /* Mid-tone surface teal */
  --srs-teal-footer:    #123F42; /* Footer uses primary heritage teal */
  --srs-teal-ink:       #102F35; /* Deepest teal for high-contrast text & icons */

  /* Radiant & Heritage Golds */
  --srs-gold-radiant:   #D8AA4E; /* Primary gold accent / active pills / badges */
  --srs-gold-deep:      #B67B22; /* Rich craft gold for borders and deep accents */
  --srs-gold-brass:     #B58542; /* Classic brass tone */
  --srs-gold-badge-bg:  #EAD19A; /* Light gold background pill */
  --srs-gold-badge-txt: #4A3718; /* Dark bronze text for light gold pills */
  --srs-gold-line:      #D69433; /* Divider gold line */
  --srs-gold-border:    rgba(216, 170, 78, 0.45); /* Subtle gold shimmer border */

  /* Canvas, Surfaces & Backgrounds */
  --srs-bg-canvas:      #F6F0E5; /* Authentic warm ivory background */
  --srs-bg-hero:        #F7F4EE; /* Hero & section alternate ivory */
  --srs-bg-card:        #FFFDF9; /* Card & modal warm silk white */
  --srs-bg-pure-white:  #FFFFFF;
  --srs-bg-floral-white:#FFFAF0; /* Warm announcement text tint */

  /* Typography & Ink Colors */
  --srs-text-primary:   #102F35; /* Crisp readable teal-ink text */
  --srs-text-body:      #2F2923; /* Warm dark brown-charcoal for descriptions */
  --srs-text-muted:     #6C665E; /* Warm sandstone gray for specs & SKUs */
  --srs-text-inverse:   #FFFFFF; /* White text on dark teal / gold buttons */

  /* Borders & Dividers */
  --srs-border-light:   #EAE8E6; /* Subtle clean border */
  --srs-border-warm:    #DCD8D0; /* Card border */
  --srs-border-focus:   #123F42; /* Focus ring */

  /* Stock & Status Colors */
  --srs-stock-in:       #1B7340; /* In Stock green */
  --srs-stock-in-bg:    #E8F5E9;
  --srs-stock-low:      #C05621; /* Low Stock amber */
  --srs-stock-low-bg:   #FEEBC8;
  --srs-stock-out:      #718096; /* Out of Stock gray */
  --srs-stock-out-bg:   #EDF2F7;

  /* ==========================================================================
     2. TYPOGRAPHY
     ========================================================================== */
  --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Scales */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.84375rem; /* 13.5px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */

  /* ==========================================================================
     3. SPACING & SIZING
     ========================================================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* ==========================================================================
     4. ELEVATION & SHADOWS
     ========================================================================== */
  --shadow-subtle: 0 2px 8px rgba(18, 63, 66, 0.04);
  --shadow-card:   0 4px 18px rgba(18, 63, 66, 0.06);
  --shadow-hover:  0 12px 28px rgba(18, 63, 66, 0.12);
  --shadow-modal:  0 24px 60px rgba(16, 47, 53, 0.25);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     5. RESPONSIVE BREAKPOINTS (For CSS reference)
     ========================================================================== */
  --breakpoint-mobile:  639px;
  --breakpoint-tablet:  640px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1280px;

  /* Layout Widths */
  --container-max: 1360px;
  --header-height-mobile: 60px;
  --header-height-desktop: 72px;
}