/* ==========================================================================
   PHL Design Tokens — v1.0 (2026-07)
   Single source of truth for PHLweb3 and all PHL artifacts.
   Full spec: C:\Monte\PHL\Design\PHL-Design-System.html + DESIGN.md
   ========================================================================== */

:root {
    /* ---- Brand core ---- */
    --phl-orange:        #EF7B00;  /* primary accent — headlines, active states, key highlights */
    --phl-orange-bright: #FF8C00;  /* gradients, hover glow */
    --phl-orange-deep:   #C56400;  /* orange text on light ground (AA), pressed states */
    --phl-steel:         #4682B4;  /* secondary hue — links, data emphasis, below-avg heat pole */
    --phl-steel-bright:  #5A9FD4;
    --phl-steel-deep:    #2E5B8A;

    /* ---- Ink & neutrals (cool, blue-biased — never pure gray) ---- */
    --phl-ink:           #17222E;  /* masthead, table headers, editorial ground */
    --phl-ink-2:         #22303F;  /* raised panels on ink */
    --phl-text:          #1E2833;  /* body text on light */
    --phl-muted:         #5B6673;  /* secondary text, captions */
    --phl-faint:         #8A94A0;  /* tertiary, disabled */
    --phl-line:          #DCE3EB;  /* borders, rules */
    --phl-line-soft:     #EAEFF4;  /* row separators inside tables */
    --phl-surface:       #F5F7FA;  /* page background */
    --phl-card:          #FFFFFF;  /* content surfaces */

    /* ---- Semantic (state ≠ accent) ---- */
    --phl-win:           #2E7D4F;
    --phl-loss:          #C0392B;
    --phl-gold:          #C9971C;  /* championships, franchise keepers */
    --phl-gold-soft:     #FBF3DC;
    --phl-warn:          #B37B00;

    /* ---- Row highlights (carried over from PHLweb2 standings motif) ---- */
    --phl-row-divwinner: #DCE8F6;  /* division winner */
    --phl-row-wildcard:  #EBF1F8;  /* wild card */
    --phl-row-keeper:    #FDF1E3;  /* keeper */
    --phl-row-franchise: #FBF3DC;  /* franchise keeper (gold) */
    --phl-row-ineligible:#F9E9E7;  /* ineligible */

    /* ---- Heat scale (Fangraphs-style conditional formatting)
           Diverging: steel = below average · white = average · orange = above average */
    --phl-heat-lo-2:     #9DBFDA;
    --phl-heat-lo-1:     #CEDFEC;
    --phl-heat-mid:      #FFFFFF;
    --phl-heat-hi-1:     #FBDDBC;
    --phl-heat-hi-2:     #F6BB79;

    /* ---- Position badge hues (ESPN-style, PHL palette) ---- */
    --pos-qb:            #A83240;
    --pos-rb:            #2E7D4F;
    --pos-wr:            #4682B4;
    --pos-te:            #7A4FA0;
    --pos-k:             #5B6673;
    --pos-dst:           #6B4F3A;
    --pos-flex:          #8A94A0;

    /* ---- Typography ---- */
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --font-score:   'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;  /* numerals only: scores, big stat figures */
    --font-ui:      'Inter', 'Barlow', 'Segoe UI', Roboto, Calibri, sans-serif;
    --font-story:   Georgia, 'Times New Roman', serif;

    /* Type scale (rem) */
    --fs-hero:    3.25rem;   /* editorial headline / page hero */
    --fs-h1:      2.125rem;  /* page title */
    --fs-h2:      1.5rem;    /* section */
    --fs-h3:      1.125rem;  /* card title */
    --fs-body:    1rem;
    --fs-data:    0.78125rem; /* 12.5px — stat table body */
    --fs-caption: 0.75rem;
    --fs-label:   0.6875rem; /* 11px — eyebrows, column headers, badges */
    --fs-score:   2.5rem;    /* matchup card scores (display face) */

    /* ---- Spacing (8pt grid) ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* ---- Shape & elevation ---- */
    --radius-card:  10px;
    --radius-badge: 4px;
    --radius-pill:  999px;
    --shadow-card:  0 1px 3px rgba(23, 34, 46, 0.08), 0 1px 2px rgba(23, 34, 46, 0.05);
    --shadow-hover: 0 4px 12px rgba(23, 34, 46, 0.12);

    /* ---- Layout ---- */
    --shell-max:    1280px;  /* app shell */
    --story-max:    68ch;    /* editorial column */
    --header-h:     56px;
}