/* ==========================================================================
   Scott Randolph's Tree Service — Design Tokens
   Single source of truth for color, type, space, motion.
   Brand colors derived from the company logo: forest green (tree),
   safety orange (RANDOLPH'S), deep navy-purple (lettering).
   ========================================================================== */

:root {
  /* --- Brand: Green (primary / trees / trust) --- */
  --green-900: #0f3d1e;
  --green-800: #154f29;
  --green-700: #1c6a38; /* primary brand green */
  --green-600: #237a43;
  --green-500: #2f9152;
  --green-300: #8cc79e;
  --green-100: #e6f1e9;
  --green-50:  #f1f7f2;

  /* --- Brand: Orange (energy / CTA / emergency) --- */
  --orange-800: #a8370e;
  --orange-700: #c2440f;
  --orange-600: #dd4f17; /* primary CTA */
  --orange-500: #ef6326;
  --orange-200: #f8c4a6;
  --orange-100: #fde7da;

  /* --- Brand: Ink (deep navy-purple / dark sections / headings) --- */
  --ink-900: #16122f;
  --ink-800: #1f1942;
  --ink-700: #2a2356; /* primary deep purple */
  --ink-600: #3a3270;

  /* --- Neutrals (warm) --- */
  --sand-50:  #faf8f4;
  --sand-100: #f4f0e8;
  --sand-200: #ece7db;
  --paper:    #ffffff;

  --slate-800: #23262f;
  --slate-700: #32384a;
  --slate-600: #4a5163;
  --slate-500: #5d6477;
  --slate-400: #8a90a1;
  --slate-300: #c3c7d1;
  --line:      #e4e2db;
  --line-soft: #efece5;

  /* --- Semantic colors --- */
  --color-bg:           var(--sand-50);
  --color-surface:      var(--paper);
  --color-surface-alt:  var(--green-50);
  --color-ink:          var(--ink-700);   /* dark section background */
  --color-ink-deep:     var(--ink-900);
  --color-primary:      var(--green-700);
  --color-primary-dark: var(--green-800);
  --color-accent:       var(--orange-700); /* #c2440f: passes WCAG AA 4.5 as text & white-on-fill */
  --color-accent-dark:  var(--orange-800);
  --color-text:         var(--slate-700);
  --color-heading:      var(--ink-800);
  --color-text-muted:   var(--slate-500);
  --color-text-invert:  #f6f4ef;
  --color-text-invert-muted: #c9c5dd;
  --color-border:       var(--line);
  --color-focus:        var(--orange-600);
  --color-warning:      var(--orange-600);

  /* --- Typography --- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: 0.8125rem;          /* 13px */
  --fs-sm:   0.875rem;              /* 14px */
  --fs-base: 1rem;                  /* 16px */
  --fs-md:   1.0625rem;             /* 17px */
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-2xl:  clamp(1.7rem, 1.45rem + 1.2vw, 2.3rem);
  --fs-3xl:  clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --fs-4xl:  clamp(2.6rem, 2rem + 3vw, 4.2rem);
  --fs-hero: clamp(2.9rem, 2rem + 4.4vw, 5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.65;
  --ls-tight: -0.02em;
  --ls-wide: 0.12em;

  /* --- Spacing (8pt-ish scale) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  /* Section vertical rhythm (fluid) */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1360px;
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 2.5rem);

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(22, 18, 47, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 18, 47, 0.08);
  --shadow: 0 10px 30px -12px rgba(22, 18, 47, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(22, 18, 47, 0.28);
  --shadow-accent: 0 14px 30px -12px rgba(221, 79, 23, 0.5);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;

  /* --- Z-index --- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 500;
  --z-modal: 1000;
}