/* ==========================================================================
   DUTTON BROWN — Design Tokens
   MIRROR COPY — Source of truth is db-brand/tokens.css
   Do not edit here. Update db-brand first, then copy here.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------
     POWDER COAT SWATCHES — 13 Product Colors
     For product graphics, decorative color strips, and section separators
     only. NOT for UI elements, backgrounds, buttons, or text.
     ------------------------------------------------------------------- */
  --db-barely:         #CCB8B8;
  --db-pinkaboo:       #f7b6c0;
  --db-black:          #000000;
  --db-bone:           #e5e4cf;
  --db-chalk:          #D0D0D0;
  --db-cobalt:         #203955;
  --db-lagoon:         #728384;
  --db-ochre:          #B89111;
  --db-orange:         #D4713B;
  --db-python-green:   #4E782F;
  --db-riding-hood-red:#9F2C00;
  --db-slate-blue:     #2C4A56;
  --db-spa:            #a0af9c;
  --db-white:          #FFFFFF;

  /* -------------------------------------------------------------------
     NEUTRAL PALETTE
     ------------------------------------------------------------------- */
  --db-gray-100:       #F7F5F2;
  --db-gray-200:       #EDE9E3;
  --db-gray-300:       #D6D0C8;
  --db-gray-400:       #B0A898;
  --db-gray-500:       #8A8078;
  --db-gray-600:       #5C554E;
  --db-gray-700:       #3D3832;
  --db-gray-800:       #2A2622;
  --db-gray-900:       #1A1714;

  /* -------------------------------------------------------------------
     BRAND COLORS — The 5 Official Brand Colors (Oranges + Grays)
     These are the ONLY colors for all UI, layouts, text, buttons, and
     branding. The 13 powder coat swatches above are strictly for product
     graphics, decorative color strips, and section separators.
     ------------------------------------------------------------------- */
  --db-primary:        #4A4A4A;
  --db-accent:         #FF9912;
  --db-accent-hover:   #D97706;
  --db-accent-soft:    #FFF4E0;
  --db-surface:        #F7F5F2;
  --db-surface-mid:    #EDE9E3;
  --db-text:           #4A4A4A;
  --db-text-muted:     #6B6B6B;
  --db-text-light:     #8A8A8A;
  --db-text-inverse:   var(--db-white);
  --db-border:         #E6E6E6;

  /* -------------------------------------------------------------------
     TYPOGRAPHY — Poppins
     ------------------------------------------------------------------- */
  --db-font-primary:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

  /* Weights — Ship 300, 400, 600 only.
     Light (300) is the dominant voice. Regular (400) for functional UI.
     Semibold (600) for emphasis. No 500 or 700 in production. */
  --db-font-light:     300;
  --db-font-regular:   400;
  --db-font-semibold:  600;

  /* Line Heights */
  --db-leading-tight:  1.15;
  --db-leading-snug:   1.3;
  --db-leading-normal: 1.5;
  --db-leading-relaxed:1.65;

  /* Letter Spacing */
  --db-tracking-tight: -0.02em;
  --db-tracking-normal: 0;
  --db-tracking-wide:   0.05em;
  --db-tracking-wider:  0.1em;

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

  /* -------------------------------------------------------------------
     BORDERS & RADII
     Minimal radius (4px) gives a clean, precise feel without being
     harsh. We favor straight lines over bubbly shapes, but a subtle
     soften is welcome. radius-full is retained for color swatches
     and pills only.
     ------------------------------------------------------------------- */
  --db-radius:      4px;
  --db-radius-full: 9999px;

  /* -------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------- */
  --db-shadow-sm:   0 1px 2px rgba(26,26,26,0.06);
  --db-shadow-md:   0 4px 12px rgba(26,26,26,0.08);
  --db-shadow-lg:   0 8px 24px rgba(26,26,26,0.10);
  --db-shadow-xl:   0 16px 48px rgba(26,26,26,0.12);

  /* -------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------- */
  --db-transition-fast:   150ms ease;
  --db-transition-normal: 250ms ease;
  --db-transition-slow:   400ms ease;

  /* -------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------- */
  --db-max-width:    1200px;
  --db-max-width-sm: 640px;
  --db-max-width-md: 768px;
  --db-max-width-lg: 1024px;
}