/* ─────────────────────────────────────────────────────────────
 * Pivt Media — Design Tokens
 * Colors, type, spacing, radius. Drop this into any prototype
 * and reference vars by name.
 * ───────────────────────────────────────────────────────────── */

/* Editorial brand faces (Archivo · JetBrains Mono · Press Start 2P) load from
   Google Fonts via <link> tags injected by build.mjs — no local @font-face. */

:root {
  /* ── COLOR — editorial-orange system (ported from live pivtmedia.com) ─────
     The portal was originally built on a purple→coral palette; it now matches
     the website's light editorial system. Legacy token names (--purple,
     --coral, --gradient, --grey-*) are kept as ALIASES remapped to the new
     palette so existing rules recolor wholesale. New code should prefer the
     canonical tokens: --accent / --ink / --surface / --line. */
  --ink:        #121212;   /* primary text · dark surface */
  --surface:    #e2e2e2;   /* editorial canvas */
  --surface-2:  #f3f3f3;   /* lighter panel */
  --line:       #c5c5c5;   /* visible hairline */
  --accent:     #ff5c00;   /* signature orange */
  --accent-hot: #e04e00;   /* pressed / hover orange */
  --dot:        #898989;   /* muted mono grey */

  /* Legacy aliases → remapped to the editorial palette */
  --purple:   var(--accent);
  --coral:    var(--accent-hot);
  --black:    var(--ink);
  --grey-900: #1a1a1a;
  --grey-700: #2b2b2b;
  --grey-500: #6c6c6c;
  --grey-300: var(--line);
  --grey-100: #e7e7e5;
  --grey-50:  var(--surface-2);
  --white:    #ffffff;
  --bg:       #ffffff;
  --muted:    rgba(18, 18, 18, 0.55);
  --border:   rgba(18, 18, 18, 0.14);

  /* Gradient — subtle orange; editorial favors the flat accent, used sparingly. */
  --gradient:      linear-gradient(100deg, #ff5c00 0%, #e04e00 100%);
  --gradient-soft: linear-gradient(100deg, rgba(255,92,0,0.14) 0%, rgba(224,78,0,0.14) 100%);
  --grad-1: #ff5c00; --grad-2: #f85800; --grad-3: #f25200;
  --grad-4: #ec4f00; --grad-5: #e04e00; --grad-6: #d84a00; --grad-7: #d04600;

  /* ── COLOR — semantic ─────────────────────────────────────── */
  --fg-1: var(--ink);
  --fg-2: var(--muted);
  --bg-1: var(--surface-2);
  --accent-warm: var(--accent-hot);

  /* ── TYPE — Archivo (display/body) · JetBrains Mono (labels) · Press Start (pixel) ── */
  --font-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-body-alt: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-pixel:    'Press Start 2P', 'JetBrains Mono', monospace;
  --warm-white:    #f3f3f3;

  /* Scale — display headlines are huge; body is generous */
  --t-display-1: clamp(72px, 11vw, 168px); /* hero monolith */
  --t-display-2: clamp(56px, 8vw, 128px);  /* section opener */
  --t-display-3: clamp(40px, 5.5vw, 88px); /* sub-section */
  --t-h1:        clamp(32px, 4vw, 56px);
  --t-h2:        clamp(24px, 3vw, 40px);
  --t-h3:        20px;
  --t-body:      17px;
  --t-body-lg:   18px;
  --t-small:     15px;
  --t-pill:      15px;
  --t-eyebrow:   13px;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* Leading */
  --lh-display: 0.96;
  --lh-tight:   1.05;
  --lh-body:    1.5;
  --lh-pill:    1;

  /* Tracking */
  --tr-display: -0.025em;
  --tr-h:       -0.015em;
  --tr-eyebrow: 0.12em;

  /* ── SPACING (8px grid) ───────────────────────────────────── */
  --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: 160px;

  /* Page outer padding */
  --pad-page: clamp(24px, 4vw, 56px);
  --pad-section-y: clamp(64px, 10vw, 160px);

  /* ── RADIUS ──────────────────────────────────────────────── */
  --r-pill: 999px;
  --r-card: 32px;
  --r-image: 48px;
  --r-arch: 9999px; /* applied to two adjacent corners only */
  --r-input: 16px;

  /* ── ELEVATION ────────────────────────────────────────────── */
  /* The brand does not use drop shadows on cards.
     The one allowed shadow is a soft hover on pills. */
  --shadow-pill-hover: 0 8px 24px rgba(12, 12, 12, 0.12);

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 600ms;
}

/* ─────────────────────────────────────────────────────────────
 * Base — keep this minimal; UI kits compose on top
 * ───────────────────────────────────────────────────────────── */

html {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  line-height: var(--lh-body);
}

/* Display headings — use Black (900) weight to match the heavy display tone */
.t-display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  margin: 0;
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}

.t-display-3 {
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-semi);
  line-height: 1.25;
  margin: 0;
}

p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}

.t-body-lg { font-size: var(--t-body-lg); }
.t-small   { font-size: var(--t-small); color: var(--fg-2); }
.t-muted   { color: var(--fg-2); }

.t-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Pill — the brand's CTA shape.
   On hover, the *text* lights up with the signature gradient.
   The pill background/border stay in their resting state. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-pill);
  font-weight: var(--w-medium);
  line-height: var(--lh-pill);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 80ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover {
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pill:active { transform: scale(0.97); }
.pill .arrow {
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pill:hover .arrow { transform: translateX(4px); color: var(--coral); }

/* Dark variant — solid ink pill, white text at rest; text gradient on hover.
   The pill background stays solid ink while only the text fill switches. */
.pill--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.pill--dark:hover {
  /* The background-clip: text inherited from .pill:hover would normally
     clip our gradient to the glyphs — but we want the dark pill background
     to keep showing OUTSIDE the text. We achieve this with background-color
     ink + background-image gradient + background-clip: text. */
  background-color: var(--ink);
  background-image: var(--gradient);
}
.pill--dark .arrow { color: var(--white); }
.pill--dark:hover .arrow { color: var(--coral); }

/* Ghost — hairline border, same hover behavior as default */
.pill--ghost { border-color: var(--border); }

/* Arch — the brand's signature image silhouette.
   A rectangle whose top two corners are full half-circles. */
.arch {
  border-radius: var(--r-arch) var(--r-arch) var(--r-card) var(--r-card);
  overflow: hidden;
}
.arch--full {
  border-radius: var(--r-arch);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Card — flat, hairline, no shadow */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-6);
}

/* Hairline divider */
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}