/* ==========================================================
   Porter Group — Design Tokens
   Aligned with porter-group-listings.vercel.app
   ========================================================== */

:root {
  /* ─── Palette (from reference microsite) ─────────────── */
  --pg-ink:      hsl(0 0% 5%);         /* deep near-black for text/backgrounds */
  --pg-charcoal: hsl(0 0% 10%);        /* body text (rgb 26,26,26) */
  --pg-gray:     hsl(40 8% 39%);       /* muted body (rgb 107,102,91) */
  --pg-border:   hsl(40 12% 86%);      /* hairline dividers */
  --pg-paper:    hsl(48 30% 97%);      /* main background (rgb 250,249,245) */
  --pg-cream:    hsl(44 28% 92%);      /* hero text on dark (rgb 240,237,229) */
  --pg-cream-2:  hsl(44 20% 91%);      /* secondary surfaces */
  --pg-muted:    hsl(44 18% 92%);      /* muted surfaces */
  --pg-gold:     hsl(36 32% 46%);      /* accent — CTAs, active nav, mark only */
  --pg-gold-2:   hsl(36 32% 40%);      /* gold hover */

  /* Aliases used throughout the site */
  --ink:    var(--pg-charcoal);
  --paper:  var(--pg-paper);
  --cream:  var(--pg-cream);
  --stone:  var(--pg-cream-2);
  --gray:   var(--pg-gray);
  --border: var(--pg-border);
  --gold:   var(--pg-gold);

  /* Semantic text/background */
  --bg:            var(--paper);
  --bg-elevated:   var(--pg-cream-2);
  --bg-inverse:    var(--pg-ink);
  --fg:            var(--ink);
  --fg-muted:      var(--gray);
  --fg-inverse:    var(--cream);
  --fg-inverse-muted: hsl(44 28% 92% / 0.75);

  /* ─── Type ────────────────────────────────────────────── */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans:  "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Modular scale (tight, magazine) */
  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.875rem;   /* 14 */
  --text-base:  1rem;       /* 16 */
  --text-md:    1.125rem;   /* 18 */
  --text-lg:    1.25rem;    /* 20 */
  --text-xl:    1.5rem;     /* 24 */
  --text-2xl:   1.875rem;   /* 30 */
  --text-3xl:   2.25rem;    /* 36 */
  --text-4xl:   3rem;       /* 48 */
  --text-5xl:   3.75rem;    /* 60 */
  --text-6xl:   4.5rem;     /* 72 */
  --text-hero:  clamp(3rem, 8vw, 6rem);      /* fluid hero */
  --text-display: clamp(2.25rem, 5vw, 4rem); /* fluid display */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;   /* eyebrows */

  /* ─── Spacing (8-pt) ─────────────────────────────────── */
  --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: 5rem;
  --s-10: 6rem;
  --s-11: 8rem;
  --s-12: 10rem;

  /* Section rhythm */
  --section-y:     clamp(4rem, 9vw, 8rem);
  --section-y-lg:  clamp(6rem, 12vw, 12rem);

  /* ─── Layout ─────────────────────────────────────────── */
  --container:     1440px;
  --container-narrow: 1120px;
  --gutter:        clamp(1.25rem, 3vw, 2.5rem);
  --header-h:      112px;     /* 7rem — larger, editorial */
  --header-h-mobile: 80px;

  /* ─── Radius / Border / Shadow ───────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --hairline: 1px solid var(--border);
  --hairline-cream: 1px solid hsl(44 28% 92% / 0.15);

  --shadow-sm: 0 1px 2px rgba(13,13,13,.04);
  --shadow-md: 0 4px 16px rgba(13,13,13,.06);
  --shadow-lg: 0 12px 40px rgba(13,13,13,.10);

  /* ─── Motion ─────────────────────────────────────────── */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur:      420ms;
  --dur-slow: 700ms;
}

@media (max-width: 720px) {
  :root {
    --header-h: var(--header-h-mobile);
  }
}