/* =========================================================================
   PRT Electronics — Design Tokens
   Colors, type, spacing, radius, shadows. Import this in any HTML you build.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand ---------- */
  --prt-yellow:        #6b4c9f;   /* primary brand — purple */
  --prt-yellow-600:    #5a3f8a;   /* hover / press */
  --prt-orange:        #0f9fcb;   /* secondary brand — blue accent */
  --prt-orange-600:    #0d8ab2;   /* hover */

  /* ---------- Ink (neutral scale) ---------- */
  --ink-1000: #101011;            /* charcoal black, primary text */
  --ink-900:  #141414;            /* default dark surface */
  --ink-800:  #1E1E1E;
  --ink-700:  #2A2A2A;
  --ink-600:  #3D3D3D;
  --ink-500:  #6B6B6B;
  --ink-400:  #9A9A9A;
  --ink-300:  #BFBFBF;
  --ink-200:  #DEDEDE;
  --ink-100:  #ECECEC;
  --ink-50:   #F6F6F6;
  --ink-0:    #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --bg:         var(--ink-0);
  --bg-muted:   var(--ink-50);
  --bg-raised:  var(--ink-0);
  --bg-inverse: var(--ink-1000);

  --fg-1:       var(--ink-1000);  /* primary text */
  --fg-2:       var(--ink-600);   /* secondary text, captions */
  --fg-3:       var(--ink-500);   /* tertiary, hints */
  --fg-mute:    var(--ink-400);
  --fg-on-yellow: var(--ink-1000); /* always read black on yellow */
  --fg-on-dark:   var(--ink-0);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-faint:  var(--ink-100);

  /* ---------- Status ---------- */
  --success: #138A4A;
  --success-bg: #E5F5EC;
  --warning: #B86E00;
  --warning-bg: #FFF1D9;
  --danger:  #C0271C;
  --danger-bg:  #FBE7E5;
  --info:    #1D4ED8;
  --info-bg: #E5ECFB;

  /* ---------- Type — families ---------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type — sizes (clamped for marketing, fixed for UI) ---------- */
  --fs-hero:  clamp(48px, 7.5vw, 112px);
  --fs-h1:    clamp(36px, 4.5vw, 64px);
  --fs-h2:    clamp(28px, 3vw, 44px);
  --fs-h3:    28px;
  --fs-h4:    22px;
  --fs-lead:  20px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --fs-mono-sm: 13px;

  /* ---------- Type — line height + tracking ---------- */
  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tr-tight:  -0.03em;
  --tr-snug:   -0.015em;
  --tr-normal: 0;
  --tr-eyebrow: 0.14em;

  /* ---------- Spacing (4-base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- Radius ---------- */
  --r-0:   0;
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 2px rgba(11,11,11,0.06), 0 1px 1px rgba(11,11,11,0.04);
  --shadow-md:  0 4px 12px rgba(11,11,11,0.08), 0 2px 4px rgba(11,11,11,0.04);
  --shadow-lg:  0 16px 40px rgba(11,11,11,0.12), 0 4px 12px rgba(11,11,11,0.06);
  --shadow-xl:  0 32px 80px rgba(11,11,11,0.18), 0 8px 24px rgba(11,11,11,0.08);
  --shadow-glow: 0 0 0 6px rgba(107,76,159,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.18);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* =========================================================================
   Semantic typography helpers — apply directly OR copy properties.
   ========================================================================= */

.prt-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.prt-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.prt-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.prt-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.prt-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--fg-1);
}

.prt-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.prt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.prt-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.prt-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-2);
}

.prt-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0;
  color: var(--fg-1);
}

/* Generic page resets that pair with the tokens */
.prt-base { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
.prt-base * { box-sizing: border-box; }