/* =========================================================================
   LeafIQ Design Tokens
   Source of truth: DESIGN.md (also informs ground rules in src/app/globals.css)
   ========================================================================= */

/* ── Web fonts — locally hosted brand TTFs ────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Outfit-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Outfit-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Outfit-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Outfit-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Outfit-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GeistMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GeistMono-Bold.ttf') format('truetype');
}

:root {
  /* ── Colors — Brand ──────────────────────────────────────────────────── */
  --color-bg:               #F4F6F2;  /* Sage Canvas — page background  */
  --color-surface:          #FFFFFF;  /* Pure Surface — cards/panels    */
  --color-text:             #18251A;  /* Forest Ink — primary text      */
  --color-muted:            #647060;  /* Misted Mute — secondary text   */
  --color-border:           #DDE5D7;  /* Frost Border — dividers        */

  --color-accent:           #2D6A4F;  /* Canopy Green — single accent   */
  --color-accent-hover:     #235840;
  --color-accent-mid:       #52B788;  /* Sprout Mid — progress/success  */
  --color-accent-light:     #E3F2E8;  /* Leaf Tint — accent backgrounds */
  --color-accent-deep:      #1A4A35;  /* used in result hero gradient   */

  /* ── Colors — Semantic ────────────────────────────────────────────── */
  --color-error:            #B83232;  /* Bark Error                     */
  --color-error-bg:         #FFF0F0;
  --color-warn:             #8A6200;  /* Amber Warn                     */
  --color-warn-bg:          #FFF8E6;
  --color-info:             #1E40AF;  /* status: scheduled              */
  --color-info-bg:          #DBEAFE;

  /* ── Foreground / Background semantic aliases ───────────────────── */
  --fg1: var(--color-text);
  --fg2: var(--color-muted);
  --fg-on-accent: #FFFFFF;
  --fg-accent: var(--color-accent);
  --bg1: var(--color-bg);
  --bg2: var(--color-surface);
  --bg-accent: var(--color-accent-light);

  /* ── Typography — Families ─────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Typography — Weights ──────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Typography — Tracking ────────────────────────────────────────── */
  --track-display:  -0.03em;
  --track-heading:  -0.02em;
  --track-ui:        0.01em;

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ── Radii ────────────────────────────────────────────────────────── */
  --radius-xs: 6px;       /* small chips                       */
  --radius-sm: 0.625rem;  /* form inputs                       */
  --radius-md: 0.75rem;   /* buttons                           */
  --radius-lg: 1rem;      /* panels                            */
  --radius-xl: 1.5rem;    /* quote result, map (mobile)        */
  --radius-2xl: 2rem;     /* hero map container                */
  --radius-pill: 9999px;  /* status pills, badges              */

  /* ── Shadows (sage-tinted, never pure black) ──────────────────────── */
  --shadow-sm:    0 1px 3px rgba(24,37,26,0.07);
  --shadow-md:    0 4px 16px rgba(24,37,26,0.09);
  --shadow-card:  0 8px 32px rgba(24,37,26,0.08);
  --shadow-hover: 0 16px 48px rgba(24,37,26,0.14);
  --shadow-cta-rest:  0 4px 12px rgba(45,106,79,0.20);
  --shadow-cta-pulse: 0 6px 24px rgba(45,106,79,0.40);
  --shadow-cta-hover: 0 6px 20px rgba(45,106,79,0.30);

  /* ── Spring (default for all interactive elements) ────────────────── */
  /* Use motion/spring lib with: stiffness: 120, damping: 18           */
  /* CSS approximation: cubic-bezier(.4, .8, .3, 1.05) ~280ms          */
  --spring: cubic-bezier(0.4, 0.8, 0.3, 1.05);
  --spring-duration: 280ms;
  --ease-organic: ease-in-out;       /* nature anims only — float/pulse */

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container-max: 1320px;
  --panel-width:    420px;            /* /quote form panel              */
  --container-pad: clamp(1rem, 4vw, 3rem);
  --section-gap:   clamp(4rem, 8vw, 7rem);
}

/* =========================================================================
   Base typography
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg1);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   Semantic typography classes
   Use these — they roll up font-family + size + weight + tracking + color.
   ========================================================================= */

.t-display {       /* hero headlines               */
  font-family: var(--font-display);
  font-weight: var(--weight-black);          /* 800 */
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

.t-h1 {            /* page titles                  */
  font-family: var(--font-display);
  font-weight: var(--weight-bold);           /* 700 */
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

.t-h2 {            /* section headings             */
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);       /* 600 */
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: var(--track-heading);
  color: var(--fg1);
}

.t-h3 {            /* card titles, group labels    */
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: var(--track-heading);
  color: var(--fg1);
}

.t-body {          /* default copy                  */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg1);
  max-width: 65ch;
}

.t-body-muted {    /* secondary copy / metadata     */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
  max-width: 65ch;
}

.t-label {         /* form labels, UI captions      */
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: var(--track-ui);
  color: var(--fg1);
}

.t-eyebrow {       /* small uppercase section ID   */
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg2);
}

.t-mono {          /* prices, sq ft, IDs, dates    */
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-feature-settings: 'tnum';
}

.t-price-hero {    /* the main quote total         */
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.t-caption {       /* muted micro-copy              */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg2);
}