/* ========================================================================
   Artificial Grass Company — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ======================================================================== */

:root {
  /* ---------- COLOR ---------- */
  /* Palette: gold + slate/charcoal. No greens anywhere except WhatsApp. */

  --charcoal-950: #0F1419;
  --charcoal-900: #1A202C;
  --charcoal-800: #2D3748;   /* primary dark band */
  --charcoal-700: #3F4A5C;

  /* "green-*" tokens kept as legacy names but now map to slate / blue-grey values. */
  --green-950: #0F1419;
  --green-900: #1A202C;      /* darkest slate, replaces old deep-green */
  --green-800: #2D3748;      /* charcoal */
  --green-700: #3F4A5C;      /* mid slate — was primary brand green */
  --green-600: #4A5568;
  --green-500: #5C6879;      /* slate mid */
  --green-400: #7B8699;
  --green-300: #9CA5B4;
  --green-200: #C0C7D2;
  --green-100: #DEE2E9;      /* very light slate wash */
  --green-50:  #EEF1F5;      /* near-white slate */

  --cream-50:  #FAF7F0;      /* paper / page background */
  --cream-100: #F2EEE2;
  --cream-200: #E6E0CC;
  --cream-300: #D8CFB3;

  --gold-700: #8A6518;
  --gold-600: #B5932B;
  --gold-500: #E8C84A;       /* primary brand — punchy saturated gold */
  --gold-400: #EED374;
  --gold-300: #F2DE9A;
  --gold-200: #F7E7B8;
  --gold-100: #FAF0CC;
  --gold-50:  #FDF8E3;

  --ink-950:   #0B0B0B;
  --ink-900:   #1A1A1A;
  --ink-800:   #2B2B2B;
  --ink-700:   #3F3F3F;
  --ink-600:   #5C5C5C;
  --ink-500:   #797979;
  --ink-400:   #9C9C9C;
  --ink-300:   #C2C2C2;
  --ink-200:   #DEDEDE;
  --ink-100:   #EFEFEF;

  --white: #FFFFFF;

  --success: #B5932B;  /* success states use gold — no green anywhere */
  --warning: #B5811E;
  --danger:  #B33A3A;

  /* Semantic aliases */
  --bg-page:        var(--cream-50);
  --bg-surface:     var(--white);
  --bg-surface-alt: var(--cream-100);
  --bg-band-dark:   var(--charcoal-800);
  --bg-band-darker: var(--charcoal-950);
  --text-strong:    var(--ink-900);
  --text-default:   var(--ink-800);
  --text-muted:     var(--ink-600);
  --text-subtle:    var(--ink-500);
  --text-on-dark:   var(--cream-50);
  --text-on-dark-muted: var(--cream-200);
  --border-soft:    var(--cream-200);
  --border-medium:  var(--cream-300);
  --border-strong:  var(--ink-300);
  --accent:         var(--gold-500);         /* primary brand — gold */
  --accent-strong:  var(--gold-600);
  --accent-soft:    var(--gold-100);
  --highlight:      var(--gold-500);
  --link:           var(--charcoal-800);
  --focus-ring:     rgba(232, 200, 74, 0.55);  /* gold focus ring */

  /* ---------- TYPE ---------- */
  --font-display: "Fraunces", "Cormorant Garamond", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Modular scale — desktop first, mobile values adjusted in clamps below */
  --fs-eyebrow:  0.75rem;   /* 12 */
  --fs-small:    0.875rem;  /* 14 */
  --fs-body:     1rem;      /* 16 */
  --fs-lead:     1.25rem;   /* 20 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h2:       clamp(1.625rem, 1.2rem + 1.4vw, 2rem);    /* 26 → 32 */
  --fs-h1:       clamp(2.125rem, 1.55rem + 2vw, 3rem);     /* 34 → 48 */
  --fs-display:  clamp(2.5rem, 1.6rem + 3.6vw, 4rem);      /* 40 → 64 */
  --fs-mega:     clamp(3rem, 1.6rem + 5.5vw, 5.5rem);      /* 48 → 88 */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.85;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.18em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---------- SPACING (8-point base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-12: 6rem;      /* 96 */
  --space-16: 8rem;      /* 128 */
  --space-20: 10rem;     /* 160 */

  /* Section rhythm — paired to viewport */
  --section-y:    clamp(4rem, 6vw, 8rem);
  --section-y-sm: clamp(2.5rem, 4vw, 5rem);

  /* Layout container widths */
  --container-narrow: 720px;
  --container-base:   1180px;
  --container-wide:   1380px;

  /* ---------- RADIUS ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- SHADOW ---------- */
  /* Tinted with green-900 so they fit the editorial palette */
  --shadow-1: 0 1px 2px rgba(26, 32, 44, 0.05);
  --shadow-2: 0 4px 12px rgba(26, 32, 44, 0.07), 0 1px 3px rgba(26, 32, 44, 0.05);
  --shadow-3: 0 12px 32px rgba(26, 32, 44, 0.10), 0 2px 6px rgba(26, 32, 44, 0.06);
  --shadow-4: 0 20px 56px rgba(26, 32, 44, 0.16), 0 4px 12px rgba(26, 32, 44, 0.07);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 400ms;
  --t-vslow: 700ms;

  /* ---------- LAYERS ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-vslow: 0ms;
  }
}