/* =========================================================
   PFD Development — Design Tokens
   Colors, Typography, Spacing, Radius, Shadows, Motion
   ========================================================= */

/* ---------- FONTS (Google Fonts substitutes; flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
  /* =====================================================
     CORE BRAND COLORS — sampled directly from PFD logos
     ===================================================== */
  --pfd-blue:        #3165B0;   /* primary brand blue (logo background / mark) */
  --pfd-blue-deep:   #234A85;   /* darker pressed/hover state */
  --pfd-blue-soft:   #5B82C2;   /* lighter accent / hover-lift */
  --pfd-blue-tint:   #E6ECF6;   /* very light wash for backgrounds */

  --pfd-platinum:    #D1D2D4;   /* light cool gray (logo background variant) */
  --pfd-platinum-2:  #BCBEC2;   /* slightly darker step */
  --pfd-platinum-3:  #E8E9EB;   /* lighter wash */

  /* =====================================================
     NEUTRALS — warm-leaning architectural greys
     Inspired by the "modern loft" interior palette
     ===================================================== */
  --pfd-ink:         #14181F;   /* near-black for primary text on light */
  --pfd-graphite:    #2D333D;   /* secondary heading / strong UI */
  --pfd-slate:       #525A66;   /* body copy, secondary text */
  --pfd-stone:       #8A8F98;   /* tertiary / captions / disabled */
  --pfd-mist:        #C9CCD1;   /* hairlines, borders */
  --pfd-fog:         #E4E6E9;   /* subtle dividers */
  --pfd-paper:       #F4F5F7;   /* page background tint */
  --pfd-bone:        #FAFAFB;   /* card surface lifted */
  --pfd-white:       #FFFFFF;

  /* =====================================================
     ACCENT — from PITHEOU interior moodboard
     "deep teal tiled wall" + warm timber notes
     ===================================================== */
  --pfd-teal:        #2A5560;   /* bathroom feature tile */
  --pfd-teal-soft:   #6E8C94;
  --pfd-timber:      #B8956A;   /* warm wood / accent */
  --pfd-clay:        #C8A07A;   /* secondary warm */

  /* =====================================================
     SEMANTIC
     ===================================================== */
  --pfd-success:     #3F8A5B;
  --pfd-warning:     #C8932B;
  --pfd-danger:      #B23D3D;
  --pfd-info:        var(--pfd-blue);

  /* =====================================================
     FOREGROUND / BACKGROUND ROLES
     Use these in components, NOT raw color names.
     ===================================================== */
  --fg-1: var(--pfd-ink);          /* primary text */
  --fg-2: var(--pfd-slate);        /* body */
  --fg-3: var(--pfd-stone);        /* tertiary */
  --fg-on-brand: var(--pfd-white); /* text on blue */
  --fg-brand: var(--pfd-blue);     /* brand text / link */
  --fg-link: var(--pfd-blue);

  --bg-1: var(--pfd-white);        /* base surface */
  --bg-2: var(--pfd-paper);        /* page background */
  --bg-3: var(--pfd-fog);          /* subtle panel */
  --bg-brand: var(--pfd-blue);
  --bg-brand-soft: var(--pfd-blue-tint);
  --bg-inverse: var(--pfd-ink);

  --border-1: var(--pfd-fog);      /* default hairline */
  --border-2: var(--pfd-mist);     /* stronger border */
  --border-strong: var(--pfd-graphite);

  /* =====================================================
     TYPOGRAPHY — Stacks
     Display: Montserrat (geometric, architectural — matches logo)
     Body:    Inter (legible, neutral)
     Serif:   Cormorant Garamond (editorial / brochure callouts)
     ===================================================== */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, slightly tightened tracking on display */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   88px;
  --t-hero: 120px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter-spacing — the brand uses GENEROUS tracking on small caps
     (see "DEVELOPMENT" wordmark, "PITHEOU", section labels) */
  --ls-hero:    -0.02em;
  --ls-display: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.32em;   /* the signature wide-tracked label */
  --ls-label:   0.12em;

  /* =====================================================
     SPACING SCALE — 4px base
     ===================================================== */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* =====================================================
     RADIUS — minimal; architectural designs are sharp
     ===================================================== */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* =====================================================
     SHADOWS — restrained; depth from layering more than glow
     ===================================================== */
  --shadow-1: 0 1px 2px rgba(20, 24, 31, 0.04), 0 1px 1px rgba(20, 24, 31, 0.03);
  --shadow-2: 0 2px 8px rgba(20, 24, 31, 0.06), 0 1px 2px rgba(20, 24, 31, 0.04);
  --shadow-3: 0 8px 24px rgba(20, 24, 31, 0.08), 0 2px 6px rgba(20, 24, 31, 0.05);
  --shadow-4: 0 24px 48px rgba(20, 24, 31, 0.12), 0 4px 12px rgba(20, 24, 31, 0.06);
  --shadow-brand: 0 8px 24px rgba(49, 101, 176, 0.18);
  --shadow-inset: inset 0 0 0 1px rgba(20, 24, 31, 0.06);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container-narrow: 720px;
  --container-base:  1120px;
  --container-wide:  1440px;
  --gutter-mobile:   24px;
  --gutter-desktop:  48px;
}

/* =========================================================
   SEMANTIC TYPE STYLES — apply via class names
   ========================================================= */

.pfd-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pfd-blue);
}

.pfd-display-hero {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--fg-1);
}

.pfd-display-1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.pfd-display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.pfd-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.pfd-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pfd-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pfd-serif-quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.25;
  color: var(--fg-1);
}

.pfd-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.pfd-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.pfd-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.pfd-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.pfd-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.pfd-data {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Convenience body baseline */
.pfd-root {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
}