/* =========================================================================
   PAX Production — Colors & Type
   ------------------------------------------------------------------------
   The brand is a small, in-house production house: shorts, films, ads.
   Visual system is bold, geometric, and cinematic — a tight palette of
   black, white, deep green, electric purple and red, set in Fredoka.
   ========================================================================= */

/* --------------------------- Web fonts ---------------------------------- */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Condensed cut — used for tight UI labels, credits blocks */
@font-face {
  font-family: "Fredoka Condensed";
  src: url("fonts/Fredoka_Condensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka Condensed";
  src: url("fonts/Fredoka_Condensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Expanded cut — used for posters, big display moments */
@font-face {
  font-family: "Fredoka Expanded";
  src: url("fonts/Fredoka_Expanded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka Expanded";
  src: url("fonts/Fredoka_Expanded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
  /* ---- Brand core (lifted directly from Pax color.png) -------------------- */
  --pax-black:    #000000;
  --pax-paper:    #FFFFFC;   /* warm off-white — the brand "white" */
  --pax-green:    #006B42;   /* deep cinema green — primary brand */
  --pax-purple:   #5E17EB;   /* electric purple — used for the wordmark */
  --pax-red:      #FF1B1C;   /* alarm red — accents, REC indicators, CTAs */

  /* ---- Tonal extensions (kept minimal on purpose) ----------------------- */
  --pax-green-ink:   #00422A;   /* darker green, for type on paper */
  --pax-green-soft:  #E5F1EB;   /* tinted background wash */
  --pax-purple-ink:  #3A0E94;
  --pax-purple-soft: #ECE4FD;
  --pax-red-soft:    #FFE3E3;
  --pax-ink-70:      rgba(0,0,0,0.70);
  --pax-ink-50:      rgba(0,0,0,0.50);
  --pax-ink-30:      rgba(0,0,0,0.30);
  --pax-ink-10:      rgba(0,0,0,0.10);
  --pax-ink-05:      rgba(0,0,0,0.05);
  --pax-paper-70:    rgba(255,255,252,0.70);
  --pax-paper-30:    rgba(255,255,252,0.30);

  /* ---- Semantic surface / text -------------------------------------------- */
  --bg:           var(--pax-paper);
  --bg-alt:       #F4F1EA;             /* slightly toned paper */
  --bg-inverse:   var(--pax-black);
  --bg-brand:     var(--pax-green);

  --fg1:          var(--pax-black);    /* primary text on paper */
  --fg2:          var(--pax-green-ink);/* secondary, branded ink */
  --fg3:          var(--pax-ink-70);   /* muted */
  --fg-on-dark:   var(--pax-paper);
  --fg-on-brand:  var(--pax-paper);

  --accent:       var(--pax-purple);   /* the wordmark color, used sparingly */
  --accent-hot:   var(--pax-red);      /* danger / record / urgent */
  --accent-cool:  var(--pax-green);    /* primary brand surface */

  --border:       var(--pax-black);
  --border-soft:  var(--pax-ink-10);
  --rule:         var(--pax-ink-10);

  /* ---- Type stack ------------------------------------------------------ */
  --font-display:  "Fredoka Expanded", "Fredoka", system-ui, sans-serif;
  --font-body:     "Fredoka", system-ui, -apple-system, sans-serif;
  --font-ui:       "Fredoka", system-ui, sans-serif;
  --font-condensed:"Fredoka Condensed", "Fredoka", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (modular, 1.25) ---------------------------------------- */
  --t-display: clamp(56px, 9vw, 128px);
  --t-h1:      clamp(40px, 5.5vw, 72px);
  --t-h2:      clamp(28px, 3.6vw, 48px);
  --t-h3:      24px;
  --t-h4:      20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 12px;
  --t-overline:11px;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --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;

  /* ---- Radii (geometric, like the wordmark) ------------------------------ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Borders ---------------------------------------------------------- */
  --bw-1: 1.5px;
  --bw-2: 3px;
  --bw-3: 6px;     /* the chunky outer frame from the logo */

  /* ---- Shadows (used very sparingly — brand is mostly flat) -------------- */
  --shadow-sm: 0 1px 0 0 var(--pax-ink-10);
  --shadow-md: 0 4px 0 0 var(--pax-black);          /* hard offset, no blur */
  --shadow-lg: 0 8px 0 0 var(--pax-black);          /* poster-style */
  --shadow-glow: 0 0 0 6px var(--pax-purple-soft);  /* focus ring */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   Element base styles — semantic, ready-to-use
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.15; }
h4 { font-size: var(--t-h4); line-height: 1.2; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.eyebrow,
.overline {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--t-overline);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
}

p {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
}

small, .caption {
  font-size: var(--t-caption);
  color: var(--fg3);
  line-height: 1.4;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--pax-purple-ink); }

::selection {
  background: var(--pax-purple);
  color: var(--pax-paper);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--r-sm);
}