/* ============================================================
   CB KITCHEN — Design Tokens & CSS Custom Properties
   Luxury Contractor Brand System
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLOR PALETTE
     -------------------------------------------------------- */

  /* Backgrounds */
  --bg-primary:       #0a0a0a;
  --bg-secondary:     #111111;
  --bg-card:          #1a1a1a;
  --bg-card-hover:    #222222;
  --bg-footer:        #080808;

  /* Gold Spectrum */
  --gold:             #c9a96e;
  --gold-light:       #d4b87a;
  --gold-dark:        #b8943f;
  --gold-glow:        rgba(201, 169, 110, 0.15);
  --gold-glow-strong: rgba(201, 169, 110, 0.30);

  /* Text */
  --text-primary:     #ffffff;
  --text-secondary:   #a0a0a0;
  --text-muted:       #666666;

  /* Borders */
  --border-gold:      rgba(201, 169, 110, 0.2);
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-gold-solid: rgba(201, 169, 110, 0.4);

  /* Gradients */
  --gradient-gold:    linear-gradient(135deg, #c9a96e, #d4b87a, #b8943f);
  --gradient-gold-h:  linear-gradient(90deg, #c9a96e, #d4b87a, #b8943f, #d4b87a, #c9a96e);
  --gradient-dark:    linear-gradient(180deg, #0a0a0a, #111111);
  --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);

  /* Overlays */
  --overlay-dark:     rgba(0, 0, 0, 0.7);
  --overlay-darker:   rgba(0, 0, 0, 0.85);

  /* Status */
  --success:          #4ade80;
  --error:            #f87171;
  --warning:          #fbbf24;


  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */

  --font-heading:     'Playfair Display', serif;
  --font-body:        'Inter', sans-serif;
  --font-accent:      'Cormorant Garamond', serif;

  /* Fluid Font Scale */
  --fs-xs:            0.75rem;      /* 12px */
  --fs-sm:            0.85rem;      /* 13.6px */
  --fs-base:          1rem;         /* 16px */
  --fs-md:            1.1rem;       /* 17.6px */
  --fs-lg:            1.25rem;      /* 20px */
  --fs-xl:            1.5rem;       /* 24px */
  --fs-2xl:           2rem;         /* 32px */
  --fs-3xl:           2.5rem;       /* 40px */
  --fs-4xl:           3rem;         /* 48px */
  --fs-5xl:           3.5rem;       /* 56px */
  --fs-display:       4.5rem;       /* 72px */

  /* Line Heights */
  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.6;
  --lh-relaxed:       1.8;

  /* Letter Spacing */
  --ls-tight:         -0.02em;
  --ls-normal:        0;
  --ls-wide:          0.05em;
  --ls-wider:         0.1em;
  --ls-widest:        0.15em;


  /* --------------------------------------------------------
     SPACING
     -------------------------------------------------------- */

  --space-xs:         0.25rem;      /* 4px */
  --space-sm:         0.5rem;       /* 8px */
  --space-md:         1rem;         /* 16px */
  --space-lg:         1.5rem;       /* 24px */
  --space-xl:         2rem;         /* 32px */
  --space-2xl:        3rem;         /* 48px */
  --space-3xl:        4rem;         /* 64px */
  --space-4xl:        6rem;         /* 96px */
  --space-5xl:        8rem;         /* 128px */


  /* --------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------- */

  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;


  /* --------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------- */

  --transition-fast:  0.2s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.6s ease;
  --transition-slower: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);


  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:        0 16px 50px rgba(0, 0, 0, 0.6);
  --shadow-gold-sm:   0 2px 8px rgba(201, 169, 110, 0.1);
  --shadow-gold-md:   0 4px 20px rgba(201, 169, 110, 0.15);
  --shadow-gold-lg:   0 8px 40px rgba(201, 169, 110, 0.2);
  --shadow-gold-glow: 0 0 30px rgba(201, 169, 110, 0.15),
                      0 0 60px rgba(201, 169, 110, 0.05);
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.4),
                       0 0 20px rgba(201, 169, 110, 0.08);


  /* --------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------- */

  --z-behind:         -1;
  --z-base:           1;
  --z-dropdown:       10;
  --z-sticky:         20;
  --z-fixed:          30;
  --z-header:         40;
  --z-overlay:        50;
  --z-modal:          60;
  --z-popover:        70;
  --z-tooltip:        80;
  --z-top:            100;


  /* --------------------------------------------------------
     CONTAINER WIDTHS
     -------------------------------------------------------- */

  --container-sm:     640px;
  --container-md:     768px;
  --container-lg:     1024px;
  --container-xl:     1200px;
  --container-2xl:    1400px;


  /* --------------------------------------------------------
     BREAKPOINTS (reference — used via media queries)
     -------------------------------------------------------- */
  /* Mobile-first:
     sm:  480px
     md:  768px
     lg:  1024px
     xl:  1200px
     2xl: 1400px
  */
}