/* ============================================================
   SoccerTraining.io — LAYER 2: THEME
   Trainer:   Soccer Edge  (socceredgespeed.com)
   Archetype: KINETIC
   ------------------------------------------------------------
   THIS IS THE ONLY FILE THAT CHANGES BETWEEN TRAINER SITES.
   Replace it with 02-theme.esa23.css or 02-theme.donnygray.css
   and every component below re-skins itself. Components never
   reference a hex, a font family, or a raw px size.

   Brand colours were sampled from the real Soccer Edge crest and
   from the training equipment in the trainer's own photography —
   not chosen from a palette generator.
     #0C2448  crest navy      (dominant, 148k px)
     #24A8D8  crest cyan      (36.9k px)
     #A8D8F0  crest ice       (12.3k px)
     #E09010  agility rings   (indoor photos)
     #E0C010  hurdles/ladders (outdoor photos)
   ============================================================ */

:root {
  /* =========================================================
     A. BRAND PRIMITIVES — the trainer's actual two-and-a-half colours
     ========================================================= */
  --p-navy-950: #00101f;
  --p-navy-900: #001a33;
  --p-navy-850: #04223f;
  --p-navy-800: #0c2448;   /* crest navy */
  --p-navy-700: #123258;
  --p-navy-600: #1b4577;

  --p-cyan-500: #24a8d8;   /* crest cyan */
  --p-cyan-400: #4cc0e8;
  --p-ice-300:  #a8d8f0;   /* crest ice */
  --p-ice-200:  #cfeaf8;

  --p-volt-600: #d96e00;
  --p-volt-500: #ff8a00;   /* equipment orange — the energy colour */
  --p-volt-400: #ffa333;
  --p-volt-100: #ffe9cc;

  --p-white:    #f7fbfd;
  --p-mist-300: #9db4c9;
  --p-mist-500: #6b8299;

  /* =========================================================
     B. SEMANTIC MAPPING — what components actually consume
     ========================================================= */
  --surface-page:    var(--p-navy-950);
  --surface-raised:  var(--p-navy-850);
  --surface-sunken:  var(--p-navy-900);
  --surface-brand:   var(--p-navy-800);
  --surface-inverse: var(--p-white);
  --surface-accent:  var(--p-volt-500);

  --text-primary:    var(--p-white);
  --text-secondary:  #c4d6e4;
  --text-muted:      var(--p-mist-300);
  --text-on-accent:  var(--p-navy-950);
  --text-on-inverse: var(--p-navy-900);
  --text-link:       var(--p-cyan-400);

  --accent:          var(--p-volt-500);
  --accent-hover:    var(--p-volt-400);
  --accent-subtle:   rgba(255, 138, 0, 0.14);
  --accent-2:        var(--p-cyan-500);   /* data, meta, secondary state */
  --accent-2-subtle: rgba(36, 168, 216, 0.16);

  --border-hairline: rgba(168, 216, 240, 0.14);
  --border-strong:   rgba(168, 216, 240, 0.30);
  --border-focus:    var(--p-volt-400);

  /* =========================================================
     C. ARCHETYPE: KINETIC — shape, voice, rhythm, motion
     ========================================================= */

  /* Type: one superfamily. The whole personality is the true italic
     at display weight — speed rendered typographically, not with
     decorative swooshes. */
  --font-display: "Chivo", system-ui, sans-serif;
  --font-body:    "Chivo", system-ui, sans-serif;
  --font-mono:    "Chivo Mono", ui-monospace, monospace;

  --display-weight: 900;
  --display-style:  italic;
  --display-case:   uppercase;
  --display-track:  -0.032em;
  --display-leading: 0.88;

  --heading-weight: 800;
  --heading-track: -0.02em;
  --heading-leading: 1.0;

  --body-leading: 1.62;
  --label-track: 0.14em;

  --scale-ratio: 1.333;      /* perfect fourth */

  /* Shape: asymmetric corner cut = a direction of travel baked into
     the card silhouette. This is the geometry other archetypes won't have. */
  --radius-card: 3px;
  --radius-card-cut: 22px;   /* single corner, top-right */
  --radius-button: 2px;
  --radius-media: 3px;
  --radius-pill: 999px;

  --border-width: 1px;
  --shadow-card: none;
  --shadow-raised: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 0 1px rgba(255, 138, 0, 0.35), 0 16px 40px -20px rgba(255, 138, 0, 0.5);

  --density: 0.92;
  --motion-scale: 1;         /* 0 | 1 | 2 */

  /* Signature: THE LANE.
     Derived from the trainer's own equipment — agility ladder rungs and
     lane lines — set on the diagonal. Used in exactly three places:
     the hero-to-page transition, section eyebrow markers, and the stat
     band. Not a decorative texture sprayed everywhere. */
  --lane-angle: -14deg;
  --lane-rung: 3px;
  --lane-gap: 16px;
  --lane-color: rgba(255, 138, 0, 0.55);
  --lane-color-2: rgba(36, 168, 216, 0.35);

  /* Image treatment: photography here is phone-grade, mixed lighting,
     900px source. Scrim + slight desaturation unifies the set and keeps
     display sizes honest. */
  --img-filter: saturate(0.92) contrast(1.06);
  --img-scrim: linear-gradient(180deg, rgba(0,16,31,0) 30%, rgba(0,16,31,0.88) 100%);
}

/* Selection + scrollbar carry the brand too — small tells that a site
   was designed rather than assembled. */
::selection { background: var(--accent); color: var(--text-on-accent); }