/* ============================================================
   THE PRODUCTION ACADEMY — Colors & Type foundation
   Train. Perform. Belong.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brittany Signature";
  src: url("fonts/BrittanySignature.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Body / UI face — Hanken Grotesk (Google Fonts). Warm, modern, legible. */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400&display=swap");

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif; /* headlines, ALL CAPS */
  --font-script:  "Brittany Signature", "Segoe Script", cursive; /* accents only */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* everything else */

  /* ---------- BRAND COLORS ---------- */
  /* Signature pink scale (anchored on brand #fcbbe8) */
  --pink-50:  #fff4fb;
  --pink-100: #ffe8f7;
  --pink-200: #fcd6ef;
  --pink-300: #fcbbe8;  /* ★ BRAND PINK */
  --pink-400: #f593d6;
  --pink-500: #e866bf;
  --pink-600: #cf3fa1;  /* accessible pink for text/links on white */
  --pink-700: #a82d80;
  --pink-800: #7d2160;
  --pink-900: #511440;

  /* Ink (near-black) + true black */
  --black:    #000000;
  --ink-900:  #0a0a0b;  /* primary text / surfaces */
  --ink-800:  #1a1a1d;
  --ink-700:  #2b2b30;

  /* Neutrals (cool-warm gray, slightly pink-tinted) */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f9;
  --neutral-100: #f3f0f2;
  --neutral-200: #e7e3e6;
  --neutral-300: #d4cfd2;
  --neutral-400: #aba6a9;
  --neutral-500: #7e797c;
  --neutral-600: #565155;
  --neutral-700: #3a363a;
  --neutral-800: #232024;
  --neutral-900: #131114;

  /* ---------- SEMANTIC ROLES ---------- */
  --color-bg:           var(--neutral-0);
  --color-bg-alt:       var(--neutral-50);
  --color-surface:      var(--neutral-0);
  --color-ink:          var(--ink-900);   /* primary text */
  --color-ink-soft:     var(--neutral-600); /* secondary text */
  --color-ink-faint:    var(--neutral-400); /* tertiary / captions */
  --color-line:         var(--neutral-200); /* hairlines / borders */
  --color-line-strong:  var(--neutral-300);

  --color-primary:      var(--ink-900);   /* primary action = black */
  --color-primary-ink:  var(--neutral-0);
  --color-accent:       var(--pink-300);  /* brand pink accent */
  --color-accent-ink:   var(--ink-900);   /* text on pink */
  --color-accent-strong:var(--pink-600);  /* pink that passes AA on white */

  /* Inverse (dark sections / logo lockup) */
  --color-bg-invert:    var(--black);
  --color-ink-invert:   var(--neutral-0);

  /* ---------- SEMANTIC STATUS (candy-bright, pink-harmonised) ---------- */
  --color-success:   #1fd99b;  /* candy mint */
  --color-success-bg:#d4fbef;
  --color-warning:   #ffc83d;  /* candy yellow */
  --color-warning-bg:#fff2cf;
  --color-error:     #ff4d6d;  /* candy watermelon */
  --color-error-bg:  #ffdfe6;
  --color-info:      #ff5ec7;  /* candy bubblegum */
  --color-info-bg:   #ffe1f6;

  /* ---------- RADII — brand is SQUARE. No rounded edges. ---------- */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(19,17,20,0.06);
  --shadow-sm: 0 2px 8px rgba(19,17,20,0.07);
  --shadow-md: 0 8px 24px rgba(19,17,20,0.10);
  --shadow-lg: 0 18px 48px rgba(19,17,20,0.14);
  --shadow-pink: 0 12px 32px rgba(207,63,161,0.22);

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --gutter: 24px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Display = Bebas Neue (condensed caps, tight leading, slight
   letter-spacing). Body = Hanken Grotesk. Script used sparingly.
   ============================================================ */

.display-1, .display-2, .h1, .h2, .h3, .h4, .eyebrow, .overline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  color: var(--color-ink);
}

.display-1 { font-size: clamp(4rem, 9vw, 8.5rem); }   /* hero */
.display-2 { font-size: clamp(3rem, 6vw, 5.5rem); }
.h1 { font-size: clamp(2.6rem, 4.5vw, 4rem); }
.h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.h3 { font-size: clamp(1.7rem, 2.4vw, 2.25rem); line-height: 0.98; }
.h4 { font-size: 1.5rem; line-height: 1; }

.eyebrow, .overline {
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--color-accent-strong);
  line-height: 1;
}

/* Script accent — for taglines / emotional flourishes only. Never body. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pink-400);
  line-height: 1;
}
.script-lg { font-size: clamp(2.5rem, 5vw, 4rem); }
.script-md { font-size: 2rem; }

/* Body copy — Hanken Grotesk */
.lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-ink-soft);
}
.body, p.body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-ink);
}
.body-sm {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.caption {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink-faint);
  letter-spacing: 0.01em;
}
/* Label / button text — Hanken, semibold, slight tracking */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.label-caps {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}