/* ─────────────────────────────────────────────────────────────
   WeWire Talent — Design tokens
   Built to the WeWire Brand Standard: Fraunces + Graphik type,
   WeWire orange #FF4D07 + black, secondary green/blue/purple.
   (Graphik is commercial; Hanken Grotesk is the free stand-in.)
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── WEWIRE BRAND COLORS (per brand standard) ─── */
  --ww-orange:       #FF4D07;   /* primary — WeWire orange */
  --ww-orange-2:     #FF7139;   /* lighter brand orange */
  --ww-orange-deep:  #D63E05;   /* hover / press */
  --ww-orange-soft:  #FFE5D8;   /* pale orange tint (brand) */
  --ww-amber:        #FF7139;   /* warm accent = brand orange 2 */
  --ww-ink:          #0E0E0E;   /* near-black — brand Black #000 */
  --ww-ink-2:        #1E1C1A;   /* elevated dark */
  --ww-cream:        #FBF7F0;   /* page background (warm white) */
  --ww-sand:         #F1EADD;   /* subtle surface */
  --ww-white:        #FFFFFF;

  /* secondary brand palette */
  --ww-green:        #365A33;   /* brand green */
  --ww-green-soft:   #ECF6D6;   /* brand pale green #F3FFCF, toned */
  --ww-blue:         #3256FC;   /* brand blue */
  --ww-blue-deep:    #1638CD;
  --ww-blue-soft:    #F1F3FF;   /* brand pale blue */
  --ww-purple:       #5F29B3;   /* brand purple */
  --ww-purple-2:     #9D5CFF;
  --ww-purple-soft:  #D8DCFF;   /* brand pale purple */
  --ww-red:          #C0392B;   /* functional only (not advancing) */
  --ww-red-soft:     #F8E5E2;

  /* ─── SEMANTIC SURFACES ─── */
  --bg:            var(--ww-cream);
  --bg-inverse:    var(--ww-ink);
  --bg-elevated:   var(--ww-white);
  --bg-subtle:     var(--ww-sand);
  --bg-brand:      var(--ww-orange);

  /* ─── TEXT ─── */
  --fg:            var(--ww-ink);
  --fg-muted:      #6A645B;
  --fg-subtle:     #9A938A;
  --fg-on-dark:    var(--ww-cream);
  --fg-on-dark-muted: rgba(251,247,240,0.66);
  --fg-on-brand:   #FFFFFF;
  --fg-brand:      var(--ww-orange);

  /* ─── BORDERS / LINES ─── */
  --line:          rgba(27,24,19,0.12);
  --line-strong:   rgba(27,24,19,0.22);
  --line-on-dark:  rgba(251,247,240,0.16);

  /* ─── STATUS SEMANTIC ─── */
  --success:       var(--ww-green);
  --danger:        var(--ww-red);
  --warning:       var(--ww-amber);
  --info:          var(--ww-blue);

  /* ─── TYPE FAMILIES (brand: Fraunces + Graphik→Hanken Grotesk) ─── */
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:     "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* ─── TYPE SCALE ─── */
  --t-display-xl:  clamp(64px, 9vw, 150px);
  --t-display-lg:  clamp(52px, 7vw, 104px);
  --t-display-md:  clamp(38px, 5vw, 68px);
  --t-display-sm:  clamp(30px, 4vw, 50px);
  --t-h1:          40px;
  --t-h2:          32px;
  --t-h3:          26px;
  --t-h4:          20px;
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     12px;
  --t-eyebrow:     13px;

  /* ─── TYPE TOKENS ─── */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;
  --tracking-button:  0.02em;

  --leading-display:  1.0;
  --leading-snug:     1.08;
  --leading-normal:   1.5;
  --leading-relaxed:  1.55;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ─── RADII ─── */
  --r-xs:   8px;
  --r-sm:   14px;
  --r-md:   22px;
  --r-lg:   32px;
  --r-xl:   44px;
  --r-pill: 999px;

  /* ─── SPACING (4-pt) ─── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* ─── ELEVATION ─── */
  --shadow-xs: 0 1px 2px rgba(27,24,19,0.05);
  --shadow-sm: 0 4px 12px rgba(27,24,19,0.06);
  --shadow-md: 0 10px 30px rgba(27,24,19,0.09);
  --shadow-lg: 0 24px 60px rgba(27,24,19,0.14);
  --shadow-glow: 0 0 60px rgba(255,77,7,0.22);

  /* ─── MOTION ─── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur:       260ms;
  --dur-slow:  520ms;
}

/* ─── BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--t-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500;
  letter-spacing: var(--tracking-tight); line-height: var(--leading-display);
  font-variation-settings: "opsz" 144, "SOFT" 55; }
p { margin: 0; }

.eyebrow {
  font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-muted);
}

::selection { background: var(--ww-orange); color: #fff; }