/* ============================================================
   HEY WORK FRIEND — DESIGN TOKENS (COLORS + TYPE)
   Editorial Noir · Edition 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color primitives ---------- */
  --near-black:   #2a2e31;  /* primary ink, backgrounds — warm charcoal */
  --deep-black:   #1f2224;  /* footers, deepest surfaces */
  --surface-dark: #353a3d;  /* dark card on dark page */
  --off-white:    #f7f6f3;  /* page background (never pure white) */
  --teal:         #3aafa9;  /* brand accent — CTAs, eyebrows, rules */
  --teal-deep:    #2d9a94;  /* teal hover */
  --cream:        #f4e7d4;  /* editorial warm surface */
  --slate:        #5d7290;  /* authority / secondary text */
  --rose:         #e7a6a1;  /* caution · "don't" */
  --sage:         #8daa91;  /* reset · "do" */
  --light-gray:   #e0e0df;  /* dividers, hairlines */
  --mid-gray:     #8a8a88;  /* muted captions */
  --dark-gray:    #3d4347;  /* secondary body copy */

  /* ---------- Semantic color roles ---------- */
  --bg:             var(--off-white);
  --bg-warm:        var(--cream);
  --bg-dark:        var(--near-black);
  --bg-deep:        var(--deep-black);
  --bg-authority:   var(--slate);
  --surface:        #ffffff;
  --surface-onDark: var(--surface-dark);

  --fg:             var(--near-black);
  --fg-muted:       var(--dark-gray);
  --fg-subtle:      var(--slate);
  --fg-onDark:      var(--off-white);
  --fg-onDark-muted: rgba(247, 246, 243, 0.78);
  --fg-onDark-subtle: rgba(247, 246, 243, 0.55);

  --accent:         var(--teal);
  --accent-hover:   var(--teal-deep);
  --accent-soft:    rgba(58, 175, 169, 0.10);  /* teal backgrounds */
  --accent-border:  rgba(58, 175, 169, 0.30);
  --accent-glow:    rgba(58, 175, 169, 0.14);

  --caution:        var(--rose);   /* "don't" callouts */
  --reset:          var(--sage);   /* "do" confirmations */

  --border:         var(--light-gray);
  --border-onDark:  rgba(255, 255, 255, 0.08);

  /* ---------- Type families ---------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'DM Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* ---------- Type scale (desktop) ---------- */
  --fs-display-xl: clamp(2.5rem, 5vw, 4.25rem);   /* 68 */
  --fs-display:    clamp(2rem, 4vw, 3.25rem);     /* 52 — hero H1 */
  --fs-h1:         clamp(2.25rem, 4.5vw, 3.25rem);/* 52 — section H1 */
  --fs-h2:         clamp(1.75rem, 3vw, 2.5rem);   /* 40 */
  --fs-h3:         1.375rem;                       /* 22 */
  --fs-lead:       1.25rem;                        /* 20 — italic serif */
  --fs-body:       1.0625rem;                      /* 17 */
  --fs-body-sm:    0.9375rem;                      /* 15 */
  --fs-caption:    0.8125rem;                      /* 13 */
  --fs-eyebrow:    0.72rem;                        /* 11.5 mono uppercase */
  --fs-micro:      0.65rem;                        /* 10.4 mono */

  /* ---------- Line heights ---------- */
  --lh-display:  1.15;
  --lh-heading:  1.2;
  --lh-body:     1.7;
  --lh-body-sm:  1.65;
  --lh-tight:    1.3;

  /* ---------- Tracking ---------- */
  --tr-display:  -0.02em;   /* display/headlines */
  --tr-eyebrow:   0.2em;    /* mono eyebrows */
  --tr-eyebrow-loose: 0.22em;
  --tr-body:      0.01em;

  /* ---------- Weights ---------- */
  --fw-display:  700;   /* Playfair headings */
  --fw-display-black: 900;
  --fw-semi:     600;
  --fw-med:      500;
  --fw-reg:      400;

  /* ---------- Spacing (8px grid) ---------- */
  --s-0:   0;
  --s-1:   0.25rem;   /* 4  */
  --s-2:   0.5rem;    /* 8  */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   2.5rem;    /* 40 */
  --s-8:   3rem;      /* 48 */
  --s-10:  4rem;      /* 64 */
  --s-12:  6rem;      /* 96 */
  --s-14:  7rem;      /* 112 — section vertical padding */

  /* ---------- Radii ---------- */
  --r-sm: 0.375rem;   /* 6  — buttons, small chips */
  --r-md: 0.5rem;     /* 8  — inputs, tiles */
  --r-lg: 0.625rem;   /* 10 — standard cards */
  --r-xl: 0.75rem;    /* 12 — large surfaces, photos */
  --r-pill: 2rem;     /* pills */
  --r-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 2px 12px rgba(42, 46, 49, 0.06);   /* default card */
  --shadow-md:  0 6px 24px rgba(42, 46, 49, 0.10);   /* card hover */
  --shadow-lg:  0 16px 48px rgba(42, 46, 49, 0.12);  /* hero photo */
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.40);     /* on dark */
  --shadow-teal: 0 6px 24px rgba(58, 175, 169, 0.35);/* teal button hover */

  /* ---------- Layout ---------- */
  --container: 1200px;
  --reading-width: 68ch;
  --nav-h: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  350ms;
  --dur-reveal: 700ms;
  --dur-pulse:  2500ms;
}

/* ================================================================
   BASE / ELEMENT STYLES
   Use as-is, or copy these rules into product CSS.
   ================================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Headings (Playfair serif, tight tracking) ---- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); margin-bottom: 1.5rem; }
h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
/* h3 is an eyebrow by default — serif H3s get .h3-serif */
h3 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 2.5rem 0 0.75rem;
}
.h3-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  text-transform: none;
  letter-spacing: var(--tr-display);
  color: var(--fg);
  font-weight: var(--fw-display);
}

/* ---- Body ---- */
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); max-width: var(--reading-width); margin-bottom: 1rem; }
p.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* ---- Eyebrow / section label ---- */
.eyebrow, .section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow-loose);
  text-transform: uppercase;
  color: var(--teal);
  display: inline-block;
}

/* ---- Mono data ---- */
.mono, code, .data {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* ---- Links ---- */
a { color: var(--teal); text-decoration: none; transition: color var(--dur-base) var(--ease); }
a:hover { color: var(--teal-deep); }

/* ---- Pull quote ---- */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: var(--fw-semi);
  border-left: 3px solid var(--teal);
  padding-left: 1.25rem;
  color: var(--fg);
}

/* ---- Dark-surface overrides ---- */
.on-dark { color: var(--fg-onDark); }
.on-dark h1, .on-dark h2, .on-dark .h3-serif { color: var(--fg-onDark); }
.on-dark h3 { color: var(--teal); }
.on-dark p { color: var(--fg-onDark-muted); }
.on-dark p.lead { color: rgba(247, 246, 243, 0.85); }