/* ==========================================================================
   CROWN Scout Girls — Design Tokens (W-25)
   Ported from design_handoff_w25_recruiting_platform/design-system/colors_and_type.css
   Source of truth: 2026 Brand Guidelines
   -----
   Scoping strategy:
   - @font-face + :root vars are global (harmless — they just define names/values)
   - Semantic element styles (body, h1..h5, p, a, blockquote, small, code, hr)
     and utility classes are scoped under .csg-scope so existing Zox News pages
     are not flipped to the dark editorial theme by accident.
   - CROWN screen templates opt in by wrapping their content in .csg-scope
     (see template-parts/site-header.php and site-footer.php).
   ========================================================================== */

/* Fonts — all self-hosted from /assets/fonts/crown. No external CDN. */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/crown/Oswald-VariableFont.ttf') format('truetype-variations');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/crown/PTSerif-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/crown/PTSerif-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/crown/PTSerif-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PT Serif';
  src: url('../fonts/crown/PTSerif-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/crown/Roboto-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/crown/Roboto-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* Official brand colors */
  --csg-red:        #ED0000;
  --csg-grey:       #A8A8A8;
  --csg-white:      #FFFFFF;
  --csg-black:      #000000;

  /* Extended palette */
  --csg-red-dark:   #B50000;
  --csg-grey-dark:  #6A6A6A;
  --csg-grey-light: #D4D4D4;
  --csg-surface:    #181818;
  --csg-dark:       #111111;
  --csg-border:     #2A2A2A;

  /* Semantic */
  --bg:             var(--csg-black);
  --bg-elevated:    var(--csg-surface);
  --bg-raised:      var(--csg-dark);
  --border:         var(--csg-border);
  --border-strong:  var(--csg-grey-dark);

  --fg:             var(--csg-white);
  --fg-body:        var(--csg-grey);
  --fg-muted:       var(--csg-grey-dark);
  --fg-inverse:     var(--csg-black);

  --accent:         var(--csg-red);
  --accent-hover:   var(--csg-red-dark);
  --focus-ring:     var(--csg-red);

  /* Type families */
  --font-display:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:      'PT Serif', Georgia, 'Times New Roman', serif;
  --font-ui:        'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --fs-nav:         14px;
  --fs-ui-sm:       11px;
  --fs-ui:          13px;
  --fs-caption:     12px;
  --fs-body:        16px;
  --fs-h4:          18px;
  --fs-h3:          22px;
  --fs-article:     28px;
  --fs-h2:          32px;
  --fs-headline:    36px;
  --fs-display:     56px;
  --fs-hero:        72px;

  /* 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;

  /* Radii */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --shadow-inset: inset 0 0 0 1px var(--csg-border);

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:  120ms;
  --dur-med:   200ms;
  --dur-slow:  320ms;

  /* Signature red accent bar */
  --accent-bar-h: 3px;
}

/* ==========================================================================
   Scoped semantic styles — only active inside .csg-scope.
   Applied by CROWN chrome (nav/footer) + CROWN page templates as they land.

   Note: .csg-scope only sets typography — it does NOT force a background
   or text color. Handoff HTML uses a light body with nested dark bands
   (see CROWN Homepage.html: white body, dark .film section). Pages/sections
   that want the full dark editorial theme opt in with .csg-theme-dark.
   ========================================================================== */

.csg-scope {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Opt-in dark editorial theme — apply on a wrapper (page, section) that
   should render on the dark surface, e.g. <div class="csg-scope csg-theme-dark">. */
.csg-scope.csg-theme-dark,
.csg-scope .csg-theme-dark {
  background: var(--bg);
  color: var(--fg-body);
}

.csg-scope h1, .csg-scope .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
.csg-scope h2, .csg-scope .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.csg-scope h3, .csg-scope .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-article);
  line-height: 1.15;
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.csg-scope h4, .csg-scope .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.csg-scope h5, .csg-scope .h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.csg-scope p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--fg-body);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.csg-scope blockquote, .csg-scope .pullquote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg);
  border-left: 3px solid var(--csg-red);
  padding-left: var(--s-5);
  margin: var(--s-8) 0;
}
.csg-scope a {
  color: var(--csg-red);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.csg-scope a:hover { color: var(--csg-red-dark); }
.csg-scope small, .csg-scope .caption {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: 1.4;
}
.csg-scope code, .csg-scope kbd, .csg-scope pre {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.csg-scope hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

/* Utility classes — scoped. Named after Zox News Custom-CSS slots (Tier 2). */

.csg-scope .nav-text {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-nav);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg);
}
.csg-scope .featured-headline {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-headline);
  line-height: 1.1; text-transform: uppercase; color: var(--fg);
}
.csg-scope .article-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-article);
  line-height: 1.15; text-transform: uppercase; color: var(--fg);
}
.csg-scope .player-name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg);
}
.csg-scope .stat-line {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.csg-scope .tag-label {
  font-family: var(--font-ui); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--csg-red);
}
.csg-scope .timestamp {
  font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--fg-muted);
}
.csg-scope .sidebar-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg);
  border-bottom: 2px solid var(--csg-red); padding-bottom: var(--s-2); margin-bottom: var(--s-4);
}
.csg-scope .photo-caption {
  font-family: var(--font-ui); font-weight: 300; font-size: 12px;
  color: var(--fg-muted); font-style: italic;
}
.csg-scope .btn-text {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.csg-scope .footer-link {
  font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--fg-body);
}
.csg-scope .commitment-callout {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--csg-red);
}

/* Signature red accent bar — global (used by chrome + graphics) */
.accent-bar {
  display: block;
  width: 56px;
  height: var(--accent-bar-h);
  background: var(--csg-red);
}
.accent-bar--full { width: 100%; }