/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOOR — Color & Type Tokens
   Source of truth: workfloor-rebranding/app/globals.css + white-redesign handoff
   Aesthetic: refined professional + warm confidence (HVAC-trade trust)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FONTS ──────────────────────────────────────────────────────────────── */
/* Outfit (display) + DM Sans (body) — both Google Fonts, loaded locally */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/Outfit-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/DMSans-Variable.woff2") format("woff2-variations");
}

:root {
  /* ─── PRIMITIVE COLOR TOKENS ─────────────────────────────────────────── */

  /* Dark navy spectrum — used for hero, CTA banner, footer, dark mockups */
  --wf-navy-darkest: #03070d;       /* Footer, deep dark sections */
  --wf-navy-deep:    #060d16;       /* Hero, dark base */
  --wf-navy-900:     #080f18;       /* Card bg in dark sections */
  --wf-navy-800:     #0b1520;       /* Mobile menu, demo form bg */
  --wf-navy-mid:     #0b1a2a;       /* Mockup card bg */
  --wf-navy-700:     #111E2E;       /* Strong text on light, dark CTA banner */
  --wf-navy-600:     #1A2535;       /* Strong text alt */
  --wf-navy-500:     #1F3044;       /* Subtle dark accent */

  /* Cream / off-white spectrum — light theme backgrounds */
  --wf-white:        #FFFFFF;       /* Primary white section */
  --wf-warm-white:   #FAFAF8;       /* Alternate light section bg */
  --wf-cream:        #F5F2EE;       /* Logo strip, footer CTA, third alt */
  --wf-text-warm:    #F5F3EE;       /* Headlines on dark sections */

  /* Amber spectrum — the only accent color */
  --wf-amber-300:    #F0A86A;       /* Light amber */
  --wf-amber:        #E8934A;       /* Brand amber — primary accent */
  --wf-amber-dark:   #C05C1E;       /* Hover / press state */

  /* Neutral text spectrum (slate) — body copy */
  --wf-slate-100:    #c8c0b8;       /* Body on dark */
  --wf-slate-300:    #9AAABB;       /* Muted on light */
  --wf-slate-400:    #6A7D8E;       /* Secondary body */
  --wf-slate-500:    #3d5268;       /* Body on dark mid */
  --wf-slate-600:    #2a3d52;       /* Sub-muted on dark */
  --wf-slate-700:    #1e3045;       /* Most muted on dark */

  /* Functional tokens */
  --wf-green:        #4ade80;       /* "Live", success, recovered */
  --wf-green-dark:   #1A7A4A;       /* Success border / dark variant */
  --wf-red:          #E85A4A;       /* Missed, error, required-asterisk */
  --wf-blue:         #60a5fa;       /* Sync events, neutral activity */

  /* Borders */
  --wf-border-cream:    #E8DDD0;
  --wf-border-warm:     #DDD0C0;
  --wf-border-light:    rgba(0,0,0,0.07);
  --wf-border-light-strong: rgba(0,0,0,0.12);
  --wf-border-dark:     rgba(255,255,255,0.05);
  --wf-border-amber-soft: rgba(232,147,74,0.22);
  --wf-border-amber:    rgba(232,147,74,0.4);

  /* Shadows */
  --wf-shadow-card:        0 2px 12px rgba(0,0,0,0.06);
  --wf-shadow-card-hover:  0 8px 32px rgba(0,0,0,0.10);
  --wf-shadow-form:        0 8px 40px rgba(0,0,0,0.06);
  --wf-shadow-deep:        0 48px 120px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03), 0 0 80px -20px rgba(232,147,74,0.08);
  --wf-shadow-cta-glow:    0 4px 20px rgba(232,147,74,0.25);
  --wf-shadow-cta-glow-hover: 0 8px 28px rgba(232,147,74,0.35);

  /* Radii */
  --wf-radius-xs:   5px;
  --wf-radius-sm:   6px;
  --wf-radius-md:   8px;
  --wf-radius:      10px;       /* Default card */
  --wf-radius-lg:   12px;
  --wf-radius-xl:   14px;       /* Mockup */
  --wf-radius-pill: 100px;      /* CTAs, badges */

  /* Spacing scale (multiples of 4) */
  --wf-space-0: 0;
  --wf-space-1: 4px;
  --wf-space-2: 8px;
  --wf-space-3: 12px;
  --wf-space-4: 16px;
  --wf-space-5: 20px;
  --wf-space-6: 24px;
  --wf-space-8: 32px;
  --wf-space-10: 40px;
  --wf-space-12: 48px;
  --wf-space-16: 64px;
  --wf-space-20: 80px;
  --wf-space-24: 96px;

  /* ─── SEMANTIC COLOR TOKENS ──────────────────────────────────────────── */

  /* Backgrounds */
  --bg-page:          var(--wf-warm-white);
  --bg-section-1:     var(--wf-white);
  --bg-section-2:     var(--wf-warm-white);
  --bg-section-3:     var(--wf-cream);
  --bg-dark-hero:     var(--wf-navy-deep);
  --bg-dark-cta:      var(--wf-navy-700);
  --bg-dark-footer:   var(--wf-navy-darkest);
  --bg-card:          var(--wf-white);
  --bg-card-dark:     var(--wf-navy-900);
  --bg-form-input:    var(--wf-white);
  --bg-form-input-dark: rgba(255,255,255,0.05);

  /* Foregrounds */
  --fg-strong:        var(--wf-navy-700);   /* Headlines on light */
  --fg-body:          var(--wf-slate-400);  /* Body on light */
  --fg-muted:         var(--wf-slate-300);  /* Helper, labels on light */
  --fg-strong-dark:   var(--wf-text-warm);  /* Headlines on dark */
  --fg-body-dark:     var(--wf-slate-500);  /* Body on dark */
  --fg-muted-dark:    var(--wf-slate-700);  /* Most muted on dark */
  --fg-accent:        var(--wf-amber);
  --fg-accent-hover:  var(--wf-amber-dark);

  /* Component-level */
  --card-border:      1px solid var(--wf-border-light);
  --card-accent:      3px solid var(--wf-amber);
  --card-bg:          var(--bg-card);
  --card-radius:      var(--wf-radius);
  --card-shadow:      var(--wf-shadow-card);

  --btn-primary-bg:   var(--wf-amber);
  --btn-primary-fg:   var(--wf-navy-700);
  --btn-primary-bg-hover: var(--wf-amber-dark);

  /* ─── TYPE TOKENS ────────────────────────────────────────────────────── */
  --font-display: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type ramp */
  --type-eyebrow-size: 11px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 1.6px;

  --type-h1-size: clamp(40px, 7vw, 72px);
  --type-h2-size: clamp(26px, 4vw, 40px);
  --type-h3-size: clamp(22px, 3.5vw, 32px);
  --type-h4-size: 18px;
  --type-h5-size: 16px;

  --type-body-lg: 16px;
  --type-body:    14px;
  --type-body-sm: 13px;
  --type-caption: 12px;
  --type-micro:   11px;

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-base:  1.5;
  --leading-body:  1.7;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest:0.16em;
}

/* ─── SEMANTIC ELEMENT STYLES ────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

h1 { font-size: var(--type-h1-size); line-height: 1.08; }
h2 { font-size: var(--type-h2-size); line-height: var(--leading-snug); }
h3 { font-size: var(--type-h3-size); line-height: var(--leading-snug); }
h4 { font-size: var(--type-h4-size); }
h5 { font-size: var(--type-h5-size); }

p { color: var(--fg-body); line-height: var(--leading-body); }

/* Eyebrow — the brand's signature small-caps amber lead-in */
.wf-eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  color: var(--fg-accent);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

code, pre, .wf-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

::selection { background: var(--wf-amber-300); color: var(--wf-navy-700); }