/* =================================================================
   Utopia Martial Arts — Colors & Type
   Source of truth: app/globals.css (utopia-brand repo)
   ================================================================= */

@font-face {
  font-family: "The Bold Font Pro";
  src: url("./fonts/the-bold-font-pro.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* PT Sans is loaded from Google Fonts in HTML files:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
*/

:root {
  /* ---------- BRAND CORE COLORS ---------- */
  /* Utopia Teal — primary brand color, used as ACCENT (not bg) */
  --teal:           #004B4D;
  --teal-soft:      #5A8688;   /* derived tint for hover/secondary teal text */
  /* Solid Dark — the canonical dark backdrop from graphic-standards
     (multi-brand contexts, when teal competes with other colors).
     Photo overlays are BLACK gradients (see --overlay-photo) — not this. */
  --solid-dark:     #1A1A1A;

  /* Calm Gray — the "anti-white". Used for logos on teal bg per brand rule */
  --calm-gray:      #DBDBD3;
  --calm-gray-dim:  rgba(219, 219, 211, 0.78);
  --calm-gray-mid:  rgba(219, 219, 211, 0.90);

  /* Neutral grays — near-neutral, very slight cool */
  --black:          #0B0F12;
  --ink:            #1A1F23;     /* foreground */
  --slate:          #545A60;     /* muted-foreground */
  --slate-2:        #7A8087;
  --line:           #E2E3E5;     /* borders */
  --surface-2:      #F4F5F6;     /* muted bg */
  --surface:        #FAFAFA;
  --paper:          #FFFFFF;     /* card */

  /* ---------- PIES FRAMEWORK COLORS ---------- */
  /* AA contrast on white, dark, AND teal backgrounds */
  --pies-physical:      #3A9F70;  /* P — green */
  --pies-intellectual:  #5B93C8;  /* I — blue */
  --pies-emotional:     #D5704D;  /* E — orange */
  --pies-social:        #D07090;  /* S — magenta */

  /* ---------- SUB-BRAND: SUMMER CAMP ----------
     From repo: campRecolorOptions in app/(app)/summer-camp/page.tsx.
     Two colors only — Primary Blue & Primary Green. */
  --camp-blue:    #0C5A89;    /* Primary Blue */
  --camp-green:   #3DB16A;    /* Primary Green */

  /* ---------- SUB-BRAND: UTOPIA OPEN ---------- */
  /* Tournament uses core teal + black, varies per volume */
  --open-ink:     #0B0F12;

  /* ---------- SUB-BRAND: INSIDE THE WAVE PODCAST ---------- */
  --itw-ink:      #0B0F12;
  --itw-paper:    #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:               var(--surface);
  --bg-elevated:      var(--paper);
  --bg-muted:         var(--surface-2);
  --bg-dark:          var(--solid-dark);   /* dark fields when teal competes */

  --fg:               var(--ink);
  --fg-muted:         var(--slate);
  --fg-subtle:        var(--slate-2);
  --fg-on-teal:       var(--calm-gray);

  --primary:          var(--teal);
  --primary-fg:       #FAFAFA;

  --border:           var(--line);
  --ring:             var(--teal);

  --destructive:      #C0392B;
  --success:          var(--pies-physical);
  --info:             var(--pies-intellectual);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display:  "The Bold Font Pro", "Anton", "Bebas Neue", system-ui, sans-serif;
  --font-body:     "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (px) ---------- */
  /* Display (Bold Font Pro — ALWAYS UPPERCASE, NEVER ITALIC) */
  --t-display-xl: 64px;   /* hero headlines */
  --t-display-l:  48px;   /* h1 large */
  --t-display-m:  36px;   /* h1 standard */
  --t-display-s:  28px;   /* h2 large */

  /* Body & UI (PT Sans) */
  --t-h2:   24px;
  --t-h3:   20px;
  --t-h4:   18px;
  --t-body: 16px;
  --t-sm:   14px;
  --t-xs:   12px;
  --t-2xs:  10px;

  --lh-tight:  1.10;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-eyebrow: 0.18em;  /* uppercase eyebrow labels */
  --tracking-display: 0.005em;
  --tracking-body:    0;

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

  /* ---------- RADII ---------- */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;   /* base radius from globals.css (0.625rem) */
  --r-xl:  14px;
  --r-2xl: 18px;
  --r-3xl: 22px;
  --r-pill: 9999px;

  /* ---------- SHADOWS / RING ---------- */
  --ring-1:    inset 0 0 0 1px rgba(11, 15, 18, 0.10);
  --shadow-sm: 0 1px 2px rgba(11, 15, 18, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 15, 18, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 15, 18, 0.10);
  --shadow-photo: 0 24px 60px rgba(0, 75, 77, 0.18);  /* teal-tinted for hero photos */

  /* ---------- CTA GOLD ----------
     CTA pills ONLY. Never headlines, body, borders, decoration.
     Scarcity is what makes it work. Sits opposite teal on the color wheel. */
  --cta-gold:        #D4A84B;
  --cta-gold-text:   var(--teal);   /* gold pill text = teal */

  /* ---------- ELEVATION / OVERLAYS ----------
     Canonical hero overlay over photos. Black-only — NEVER teal.
     Direction: left → right (text sits on the dark left side). */
  --overlay-photo: linear-gradient(
    to right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.38) 100%
  );
  /* Stops, exact: 72% / 55% / 38% — match graphic-standards page. */
  --overlay-photo-l: rgba(0,0,0,0.72);
  --overlay-photo-m: rgba(0,0,0,0.55);
  --overlay-photo-r: rgba(0,0,0,0.38);

  /* Calm Gray text opacity tiers ON dark/photo overlays */
  --on-photo-h1:      #FFFFFF;                 /* H1 — pure white */
  --on-photo-sub:     rgba(219,219,211,0.90);  /* Subhead — Calm Gray 90% */
  --on-photo-body:    rgba(219,219,211,0.78);  /* Body — Calm Gray 78% */
}

/* ---------- ELEMENT DEFAULTS ---------- */
html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-size: var(--t-body); line-height: var(--lh-normal); }

/* The .brand-heading utility — the canonical way to set Bold Font Pro */
.brand-heading,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;            /* never italic */
  text-transform: uppercase;     /* always uppercase */
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

h1 { font: 700 var(--t-display-m)/var(--lh-tight) var(--font-display);
     text-transform: uppercase; letter-spacing: var(--tracking-display); }
h2 { font: 700 var(--t-display-s)/var(--lh-tight) var(--font-display);
     text-transform: uppercase; letter-spacing: var(--tracking-display); }
h3 { font: 600 var(--t-h3)/var(--lh-snug) var(--font-body); }
h4 { font: 600 var(--t-h4)/var(--lh-snug) var(--font-body); }
p  { font: 400 var(--t-body)/var(--lh-normal) var(--font-body); color: var(--fg); }

.eyebrow {
  font: 600 var(--t-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--primary);
}

.muted { color: var(--fg-muted); }
.small { font-size: var(--t-sm); }
.detail { font-size: var(--t-xs); color: var(--fg-muted); }

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