/* ============================================================
   SoccerTraining.io — LAYER 2: THEME
   Trainer:   Evolution Soccer Academy (esa23.com)
   Archetype: INSTITUTE
   ------------------------------------------------------------
   This is the ONLY file that differs from Soccer Edge. 01-tokens.css,
   03-components.css and site.js are byte-identical across both sites
   (md5 verified). Swap this file and the fonts, and the same engine
   produces a different company.

   Brand values measured from the ESA crest:
     #1E3C7E  royal blue   68.5% of the mark
     #FCFCFC  white         7.6%
     #D89C24  gold          4.2%
   Note: unlike Soccer Edge, the warm accent is already native to the
   crest. Gold sits at hue 40deg; royal blue at 221deg. Its complement
   is 41deg. The pairing was designed in, not added.
   ============================================================ */

:root {
  /* =========================================================
     A. BRAND PRIMITIVES
     ========================================================= */
  --p-royal-950: #05102a;
  --p-royal-900: #0a1733;
  --p-royal-850: #0f1e42;
  --p-royal-800: #14264f;
  --p-royal-700: #1e3c7e;   /* crest blue, measured */
  --p-royal-600: #2c50a0;
  --p-royal-400: #6d90d8;
  --p-royal-200: #b9cbef;

  --p-gold-700: #a8761a;
  --p-gold-600: #d89c24;    /* crest gold, measured */
  --p-gold-500: #eab33f;
  --p-gold-100: #f7e6c4;

  --p-white: #fcfcfc;
  --p-slate-300: #9fb0cf;
  --p-slate-500: #6b7d9e;

  /* =========================================================
     B. SEMANTIC MAPPING
     ========================================================= */
  --surface-page:    var(--p-royal-900);
  --surface-raised:  var(--p-royal-850);
  --surface-sunken:  var(--p-royal-950);
  --surface-brand:   var(--p-royal-700);
  --surface-inverse: var(--p-white);
  --surface-accent:  var(--p-gold-600);

  --text-primary:    var(--p-white);
  --text-secondary:  #ccd7ee;
  --text-muted:      var(--p-slate-300);
  --text-on-accent:  var(--p-royal-950);
  --text-on-inverse: var(--p-royal-800);
  --text-link:       var(--p-gold-500);

  --accent:          var(--p-gold-600);
  --accent-hover:    var(--p-gold-500);
  --accent-subtle:   rgba(216, 156, 36, 0.16);
  --accent-2:        var(--p-royal-400);
  --accent-2-subtle: rgba(109, 144, 216, 0.18);

  --border-hairline: rgba(185, 203, 239, 0.16);
  --border-strong:   rgba(185, 203, 239, 0.34);
  --border-focus:    var(--p-gold-500);

  /* =========================================================
     C. ARCHETYPE: INSTITUTE
     Precise, technical, institutional. Where Kinetic leans and
     cuts corners, Institute squares up and holds still.
     ========================================================= */

  /* One superfamily, two widths. Expanded carries the display voice;
     the same file at normal width carries the body. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --display-weight: 700;
  --display-style:  normal;       /* Kinetic is italic. Institute is upright. */
  --display-width:  118%;         /* the wdth axis — Expanded */
  --display-case:   uppercase;
  --display-track:  -0.012em;     /* expanded faces need far less negative */
  --display-leading: 0.94;

  --heading-weight: 700;
  --heading-track: -0.008em;
  --heading-leading: 1.06;

  --body-leading: 1.66;
  --label-track: 0.18em;

  --scale-ratio: 1.25;            /* major third — modest steps, many levels */

  /* Shape: square, hairline, unshadowed. Elevation by surface only. */
  --radius-card: 10px;
  --radius-card-cut: 10px;        /* no asymmetric cut — that is Kinetic's */
  --radius-button: 6px;
  --radius-media: 10px;
  --radius-pill: 999px;

  --border-width: 1px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-accent: 0 0 0 1px rgba(216, 156, 36, 0.4);

  --density: 1.05;                /* more air than Kinetic's 0.92 */
  --hero-top: 168px;              /* Expanded display runs tall; clears the nav */
  --brand-mark-h: 56px;           /* a circular crest needs more height than a
                                     horizontal lockup to read at the same weight */
  --brand-mark-foot-h: 84px;
  --motion-scale: 1;

  /* Signature: THE DATA STRIP.
     Institute proves itself with numbers, not motion. The eyebrow mark
     is a single precise rule rather than Kinetic's skewed speed bars. */
  --mark-image: linear-gradient(90deg, currentColor 0 100%);
  --mark-w: 28px;
  --mark-h: 2px;
  --mark-skew: 0deg;

  /* Photography is lifted from the trainer's own flyers — already
     duotoned blue. Treatment holds that rather than fighting it. */
  --img-filter: saturate(0.9) contrast(1.04) brightness(1.02);
  --img-scrim: linear-gradient(180deg, rgba(5,16,42,0) 28%, rgba(5,16,42,0.9) 100%);
}

::selection { background: var(--accent); color: var(--text-on-accent); }