/* ============================================================
   URBAN LANDSCAPE SUPPLIES — DESIGN TOKENS
   All CSS custom properties. Every other file inherits from here.
   ============================================================ */

:root {

  /* ─── BRAND COLORS ──────────────────────────────────────── */
  --color-sage:         #676d4b;
  --color-sage-light:   #8a9168;
  --color-sage-dark:    #4e5237;
  --color-sage-xdark:   #363821;
  --color-taupe:        #b59677;
  --color-taupe-light:  #cdb49a;
  --color-taupe-pale:   #ede3d8;

  /* ─── NEUTRAL SCALE ─────────────────────────────────────── */
  --color-charcoal:     #222222;
  --color-gray-900:     #333333;
  --color-gray-700:     #555555;
  --color-gray-500:     #878787;
  --color-gray-300:     #c4c4c4;
  --color-gray-200:     #e0ddd8;
  --color-gray-100:     #f4f2ef;
  --color-gray-50:      #faf9f7;
  --color-white:        #ffffff;

  /* ─── SEMANTIC TOKENS ───────────────────────────────────── */
  --color-text-primary:   var(--color-charcoal);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted:     var(--color-gray-500);
  --color-text-inverse:   var(--color-white);

  --color-bg-page:        var(--color-white);
  --color-bg-subtle:      var(--color-gray-100);
  --color-bg-card:        var(--color-white);
  --color-bg-bulk:        #2c2e20;
  --color-bg-bulk-card:   #383b28;

  --color-border:         var(--color-gray-200);
  --color-border-strong:  var(--color-gray-300);

  --color-cta-bg:         var(--color-sage);
  --color-cta-bg-hover:   var(--color-sage-light);
  --color-cta-bg-pressed: var(--color-sage-dark);

  --color-price:          var(--color-taupe);
  --color-badge-bg:       var(--color-taupe-pale);
  --color-badge-text:     var(--color-taupe);

  --color-success:        #4a7c59;
  --color-error:          #c0392b;
  --color-warning:        #e0933a;

  /* Utility bar */
  --color-utility-bg:     var(--color-sage-dark);
  --color-utility-text:   rgba(255,255,255,0.85);

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --font-heading: 'Times New Roman', Georgia, 'Times', serif;
  --font-body:    'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;

  /* Fluid type scale */
  --text-xs:    clamp(0.65rem, 1.1vw, 0.70rem);
  --text-sm:    clamp(0.78rem, 1.4vw, 0.875rem);
  --text-base:  clamp(0.875rem, 1.6vw, 1rem);
  --text-md:    clamp(1rem, 1.8vw, 1.125rem);
  --text-lg:    clamp(1.1rem, 2vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 2.4vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 3vw, 2rem);
  --text-3xl:   clamp(1.875rem, 3.8vw, 2.625rem);
  --text-4xl:   clamp(2.25rem, 5vw, 3.25rem);
  --text-hero:  clamp(2.75rem, 6.5vw, 4.25rem);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

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

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-narrow:  860px;
  --container-wide:    1440px;
  --container-px:      clamp(16px, 4vw, 48px);

  --header-height:     68px;
  --utility-height:    36px;

  /* ─── BORDERS & RADIUS ──────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ─── SHADOWS ────────────────────────────────────────────── */
  --shadow-xs:     0 1px 3px rgba(34,34,34,0.06);
  --shadow-sm:     0 2px 8px rgba(34,34,34,0.08);
  --shadow-md:     0 4px 16px rgba(34,34,34,0.10);
  --shadow-lg:     0 8px 28px rgba(34,34,34,0.12);
  --shadow-xl:     0 16px 48px rgba(34,34,34,0.14);
  --shadow-hover:  0 6px 22px rgba(103,109,75,0.20);
  --shadow-drawer: -4px 0 32px rgba(34,34,34,0.18);

  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --ease-snappy:   cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   360ms;
  --duration-drawer: 300ms;

  /* ─── Z-INDEX ────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;
}