/* ==========================================================================
   Opleague design tokens
   --------------------------------------------------------------------------
   Every value here comes from the agreed Figma file, Q53m705DcCXQlGQr8ibfCl.
   Nothing in this file is invented. If a new value is needed it comes from
   the mockup, not from taste.

   The palette descends from the CCC "Wolven Aurora LIGHT" system. Two rules
   decided during design that are easy to get wrong later:

   1. A big field at hue 195-205 with high saturation reads TEAL, not blue.
      So the dark grounds are a blue ramp built from the accent hue, and the
      pale UI stays light. Do not darken the accent and call it a background.
   2. Blue on blue disappears. A solid blue button sitting on a dark blue
      ground becomes ember orange. That is the only job ember has.
   ========================================================================== */

:root {

  /* --- the accent, and the light tints that survive on a dark ground ----- */
  --opl-accent:        #0D6595;   /* the brand blue, on light grounds       */
  --opl-accent-mid:    #158CB5;   /* hover and secondary only, never a field */
  --opl-accent-deep:   #005D8C;   /* pressed, and the top of the rank ladder */
  --opl-accent-lift:   #7FB2CC;   /* accent text ON dark, keeps it readable  */
  --opl-accent-halo:   #A8CFE4;   /* glows and haloes around icons          */
  --opl-accent-soft:   #9CC6DC;   /* quiet accent on dark                   */

  /* --- ember: contrast only. Blue buttons on blue grounds become this. --- */
  --opl-ember:         #E85D2A;
  /* Was #FFFFFF, which is 3.48 on the ember and fails the 4.5 minimum at
     the small bold sizes these buttons actually use. Mike first settled this on
     2026-09-19: he likes the ember, so the ember does not move and the INK
     does. #2B1206 is 5.06 on the ember and 4.81 on its hover, so both
     base passes. The HOVER had to move too: the old hover #cf4f22 was
     DARKER than the base, which makes dark ink worse, not better (4.02).
     It is now a lighter ember, #EE6B39, at 5.70. One token, every ember
     button on the site. */
  /* REVERSED 2026-09-19, later the same day, on Mike's instruction:
     "Make all of the ember buttons have white text, not black."
   The contrast cost is real and was measured before changing it:
     white on #E85D2A base  3.48   against the 4.5 AA minimum
     white on the hover     4.38   once the hover goes back to #CF4F22
   The ember itself is untouched because Mike likes it, which was his
   reason the first time too. Making white pass would need the ember
   darkened to about #C85024, 14 percent down at the same hue and
   saturation, which changes the colour he chose. His call, taken. */
  --opl-ember-ink:     #FFFFFF;  /* see the note above: Mike asked for white 2026-09-19 */

  /* --- the dark blue ramp. These are grounds, not accents. -------------- */
  --opl-blue-900:      #020A11;
  --opl-blue-850:      #030C14;
  --opl-blue-800:      #081A27;   /* the default dark page ground           */
  --opl-blue-700:      #0A2131;
  --opl-blue-600:      #0C2535;   /* nav bars, dark cards                   */
  --opl-blue-500:      #0E2F44;
  --opl-blue-400:      #103246;
  --opl-blue-300:      #123A52;   /* the brightest dark band                */

  /* --- light chrome ------------------------------------------------------ */
  --opl-ink:           #0F1214;
  --opl-night:         #161B1F;
  --opl-slate-dp:      #232A30;
  --opl-slate:         #37424A;
  --opl-steel:         #58636B;
  /* Darkened 2026-09-19 from #8C979E, which was 2.98 on white. This is the
     muted text colour for 11-13px copy all over the site, so it has to
     clear 4.5. Hue and saturation unchanged; it clears 4.5 on white, paper AND the card surfaces, which the first
     attempt did not: 4.59 on white was still 4.16 on paper. */
  --opl-gray:          #646F76;
  --opl-silver:        #ABB6BC;
  /* For LARGE quiet numerals only, currently the podium positions.
     --opl-mist is 1.42 on a card and fails even the 3.0 large-text
     threshold; this is the lightest tone of the same hue that clears it,
     so the numerals stay visibly quieter than body copy but are readable. */
  --opl-quiet-lg:      #7A8F98;
  --opl-mist:          #C5CED2;
  --opl-fog:           #DEE3E5;
  --opl-paper:         #F2F4F5;
  --opl-white:         #FFFFFF;

  /* --- the footer is the Phoenix theme's own gray, not the blue ramp ----- */
  --opl-footer-bg:     #222222;
  --opl-footer-deep:   #1A1A1A;
  --opl-footer-rule:   #393939;   /* dividers and footer inputs             */
  --opl-footer-text:   #A5A5A5;
  --opl-footer-link:   #D6D6D6;   /* lighter than the body text, not white  */
  --opl-footer-muted:  #8A8A8A;

  /* --- semantic ---------------------------------------------------------- */
  --opl-good:          #2A7454;   /* a win                                  */
  --opl-watch:         #8A5E12;
  --opl-risk:          #A94D1B;   /* supporter and merch actions            */
  --opl-critical:      #A32F2F;   /* a loss, a dispute, LIVE                */
  --opl-unranked:      #58636B;   /* practice rounds. Deliberately quiet.   */

  /* --- rank ladder: one hue, deeper means higher ------------------------- */
  --opl-rank-best:     #00435F;
  --opl-rank-a:        #005D8C;
  --opl-rank-b:        #0D6595;
  --opl-rank-c:        #58636B;
  --opl-rank-d:        #8C979E;

  /* --- surfaces ---------------------------------------------------------- */
  --opl-surface-1:     linear-gradient(180deg, #FFFFFF 0%, #EDF2F6 100%);
  --opl-surface-2:     #F7F9FB;
  --opl-tint-1:        #EAF3F9;
  --opl-tint-2:        #F1F7FB;
  --opl-page:          linear-gradient(198deg, #FFFFFF 0%, #F2F4F5 46%, #E6ECF1 100%);

  /* --- third-party brand colors. PROTECTED. Never remap these. ----------- */
  --opl-brand-discord:   #5865F2;
  --opl-brand-battlenet: #148FFF;
  --opl-brand-steam:     #171A21;
  --opl-brand-twitch:    #9146FF;
  --opl-brand-youtube:   #FF0000;
  --opl-brand-facebook:  #1877F2;
  --opl-brand-instagram: #C13584;
  --opl-brand-x:         #0F1214;

  /* --- type -------------------------------------------------------------- */
  --opl-font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --opl-font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --opl-size-hero:     54px;
  --opl-size-h1:       34px;
  --opl-size-h2:       28px;
  --opl-size-h3:       20px;
  --opl-size-h4:       18px;
  --opl-size-lede:     15px;   /* Open Sans Light. On dark it goes WHITE.   */
  --opl-size-body:     16px;
  --opl-size-body-sm:  14px;
  --opl-size-meta:     13px;
  --opl-size-label:    11px;
  --opl-size-eyebrow:  10px;
  --opl-size-micro:    9px;

  --opl-track-eyebrow: 1px;     /* letter-spacing for small caps labels     */
  --opl-track-label:   0.8px;
  --opl-track-display: 6px;     /* the wide-tracked page titles             */

  --opl-line-tight:    1.15;
  --opl-line-body:     1.6;

  /* --- spacing. The mockup works on a 4px base. -------------------------- */
  --opl-s1:  4px;
  --opl-s2:  8px;
  --opl-s3:  12px;
  --opl-s4:  16px;
  --opl-s5:  20px;
  --opl-s6:  24px;
  --opl-s7:  32px;
  --opl-s8:  40px;
  --opl-s9:  56px;
  --opl-s10: 72px;
  --opl-s11: 96px;

  --opl-gutter:        16px;    /* the phone side gutter                    */
  --opl-content:       1000px;  /* the standard content column              */
  --opl-content-wide:  1280px;  /* footer and nav                           */
  --opl-content-read:  840px;   /* long-form reading, the About page        */

  /* --- the fading light. Mike's favourite motif, used on every dark band. */
  --opl-glow-color:    #0D6595;
  --opl-glow-core:     #A8CFE4;
  --opl-glow-blur:     130px;
  --opl-glow-opacity:  0.32;
  --opl-glow-footer:   0.06;    /* white, not blue, so the gray stays gray  */

  /*
   * ELEVATION, as a scale.
   *
   * Three light-band levels and two dark-band ones, because half this site
   * is near-black and a black shadow on a near-black band is invisible. On
   * dark, depth comes from a deeper ambient shadow PLUS a hairline of light
   * along the top edge, which is what actually reads as "this is raised"
   * when there is nothing lighter behind it to cast onto.
   *
   * Elevation is meant to carry information, not decoration: resting for a
   * surface you read, lift for one you can click, overlay for something
   * floating above the page. If a static callout and a clickable tile wear
   * the same shadow then the shadow is saying nothing.
   *
   * Blur is kept modest with a tight spread rather than huge and soft.
   * Large blurs on many elements cost paint time, and they cost it most on
   * the cheap Android phones a good share of visitors will be holding.
   */
  /*
   * Raised from 0 2px 10px / 0.06 after looking at it live. Mike asked for
   * LIBERAL use, and at six percent the shadow was technically present and
   * visually absent: the hairline was still doing all the work. These are
   * the values where a card reads as sitting on the page rather than
   * printed into it, without tipping into the soft grey halo that dates a
   * design.
   */
  --opl-shadow-card:   0 3px 14px rgba(15, 18, 20, 0.10);
  --opl-shadow-lift:   0 16px 40px rgba(15, 18, 20, 0.20);

  /* Menus and anything floating clear of the page. Absorbed from the nav
     sub-menu, which had this value typed into it by hand. */
  --opl-shadow-over:   0 14px 34px rgba(0, 0, 0, 0.38);

  /* The dark bands. The inset line is the top rim catching the light. */
  --opl-shadow-dark:      0 2px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --opl-shadow-dark-lift: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --opl-shadow-icon:   0 0 34px rgba(168, 207, 228, 0.42);

  --opl-radius:        0;       /* the mockup is square. Deliberately.      */
  --opl-hairline:      1px solid var(--opl-fog);
  --opl-hairline-dark: 1px solid var(--opl-blue-300);
}

/* The mockup has no dark mode. If the browser asks for one we keep the
   light palette rather than inventing colors nobody approved. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}