/* ===========================================================================
   PURO — design tokens

   Single source of truth for colour, type, space and line on this site.
   Loaded once from index.html, which is the only real document here: every
   other template is a fragment injected into #content-area, so this is the
   only place :root can live and be seen by all of them.

   Ported from the PURO system as written down in the CSPL league site
   (cspl_league_website/ym_soccer-main/app/globals.css). Values and names came
   across; none of its code did — that repo is Tailwind v4 and this one is
   plain CSS served by Spring Boot.

   Printed-matter rules: one ground per surface, depth from rules and
   temperature rather than shadow, square corners, figures that line up down
   a column.

   TWO NAMING RULES, both learned the hard way on the CSPL side:

   1. A token name says what the value IS, not what it looks like. The
      stylesheet that preceded CSPL's had --bg-black holding a teal, which is
      how half its components ended up styled for a theme that no longer
      existed.
   2. --wash (the teal) is a GROUND. Never type. #a5c6cf on bone is ~1.7:1.
      Interactive and link text is --accent-ink, which resolves to --court.
      The site this replaces painted the teal as text in four places.
   =========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Three faces, one job each. Condensed bold italic for the names of
   SECTIONS — the oblique is the signature of the system. Plex Sans for
   reading copy. Courier Prime for every figure and label, which is what
   makes a price list read as printed matter rather than as a web app.

   The italic is a real cut, not a browser slant: a faux-oblique condensed
   face is exactly the tell this system avoids. Self-hosted woff2 to match
   the existing @font-face idiom — no runtime request to a font CDN.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Plex Condensed';
    src: url('../fonts/PlexCondensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Condensed';
    src: url('../fonts/PlexCondensed-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('../fonts/PlexSans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Sans';
    src: url('../fonts/PlexSans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/CourierPrime-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/CourierPrime-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Ground ---------------------------------------------------------
       One per surface, never two in a view. */
    --bone:  #efede8;            /* the page */
    --black: #0d0d0d;
    /* Defined for completeness, but nothing should paint with it: white
       boxes on bone read as separate sheets laid over the page rather than
       as one surface. Panels are transparent; their rules delineate them. */
    --white: #ffffff;
    --wash:  #a5c6cf;            /* fills, hover states, swatches. GROUND
                                    ONLY — never type. Valid as type on
                                    --black, where it is 10.7:1. This is the
                                    brand teal, one step off the #A1CBCC the
                                    old site used. */

    /* --- Ink ------------------------------------------------------------- */
    --puro-ink:     #0d0d0d;
    --puro-ink-2:   #55524c;
    --puro-ink-3:   #8b877f;     /* disabled, dimmed. 3.1:1 — never copy */
    --puro-ink-inv: #efede8;

    /* --- Line ------------------------------------------------------------ */
    --rule:         #cfcac1;
    --rule-heavy:   #0d0d0d;
    --rule-inverse: #2a2a2a;
    --rule-w:       1px;
    --rule-heavy-w: 2.5px;

    /* --- Signal ----------------------------------------------------------- */
    --red:      #cc0000;         /* at most ONE per view. Here: the shipping
                                    note and sold-out state. */
    --red-lift: #e31b1b;         /* mandatory on --black, where --red is 3.2:1 */
    --red-wash: #f5e4e1;         /* fill only, never type */
    --court:    #3d6b85;         /* links, active nav, selected state.
                                    5.4:1 on bone. Fails on --black — use
                                    --wash there instead. */
    --steel:    #5b6165;
    --medal:    #9a6f14;

    /* --- Semantic layer ---------------------------------------------------
       What components should actually reference. Changing the palette means
       repointing these, not editing nine stylesheets. */
    --surface:         var(--bone);
    --surface-sunken:  var(--bone);   /* same ground as the page: a panel
                                         reads as a panel only once it
                                         carries a --hairline border */
    /* Hover is a state, not a second ground. CSPL's controls use ink at 6%
       (hover:bg-ink/[0.06]) — a temperature shift on the same sheet — never a
       colour change. The teal was the wrong read of this. */
    --surface-hover:   rgba(13, 13, 13, 0.06);
    --surface-inverse: var(--black);

    --ink:           var(--puro-ink);
    --ink-secondary: var(--puro-ink-2);
    --ink-tertiary:  var(--puro-ink-3);
    --ink-inverse:   var(--puro-ink-inv);

    --hairline:        var(--rule);
    --hairline-strong: var(--rule-heavy);

    /* --accent is a FILL (the deadline badge, the sold-out state).
       --accent-ink is interactive TEXT, and is deliberately not red: red
       appears at most once per view, and links appear everywhere. */
    --accent:      var(--red);
    --accent-ink:  var(--court);
    --accent-wash: var(--red-wash);

    --positive:      var(--puro-ink);
    --positive-wash: var(--bone);
    --negative:      var(--red);
    --negative-wash: var(--red-wash);

    /* --- Depth ------------------------------------------------------------
       Comes from rules and from warm/cool temperature. Not from shadow. */
    --shadow-card:   none;
    --shadow-raised: none;
    --shadow-modal:  none;

    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-pill: 0;

    /* --- Type -------------------------------------------------------------
       --font-display and --font-body keep the names the existing stylesheets
       already reference (55 var() calls across 9 files) and are repointed at
       the new faces. --font-meta is retired; --font-util replaces it. */
    --font-display: 'Plex Condensed', 'IBM Plex Sans Condensed', 'Helvetica Neue', Helvetica, sans-serif;
    --font-body:    'Plex Sans', 'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
    --font-util:    'Courier Prime', 'Courier New', monospace;

    /* --- Space ------------------------------------------------------------
       4px base. Applied per component, never as a global rule, so a section
       inside a grid does not inherit page-level padding. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 72px;

    /* --- Type scale --------------------------------------------------------
       Tracking is positive here. Plex Condensed is already narrow; negative
       tracking closes it into a solid block. */
    --t-h1: 52px;      --lh-h1: 0.94;     --ls-h1: 0.005em;
    --t-h2: 26px;      --lh-h2: 1.04;     --ls-h2: 0.01em;
    --t-object: 17px;  --lh-object: 1.10; --ls-object: 0.01em;
    --t-body: 15px;    --lh-body: 1.50;
    --t-util: 12px;    --lh-util: 1.35;   --ls-util: 0.02em;
    --t-label: 10.5px; --lh-label: 1.30;  --ls-label: 0.10em;
}

/* ===========================================================================
   Hard resets

   border-radius and box-shadow are zeroed with !important because the page
   stylesheets set them on selectors more specific than anything we could
   write here (.product:hover, .no-articles). This squares the site in one
   move; as each page stylesheet is rebuilt its own radius declarations go
   away and this becomes belt-and-braces.

   Note this also squares .swipe-dot, which was a 50% circle. Intentional —
   the system has no pills and no circles.
   =========================================================================== */

*,
*::before,
*::after {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Consolidated here from blog.css and club.css, which each declared a global
   `* { margin:0; padding:0; box-sizing:border-box }`. Because fragments are
   injected into the live document, those resets applied site-wide and stayed
   applied after navigating away — visiting Blog silently restyled Home. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    /* The cheapest change on the site: it lines up every price down the
       shop grid, every quantity and subtotal in the cart. */
    font-variant-numeric: tabular-nums;
}

/* The oblique rule, and the signature of the system.

     italic  -> names of SECTIONS: SHOP, CART, POLICIES, page titles
     upright -> names of THINGS:   products, buttons, sizes

   Sizes are deliberately not set here — the page stylesheets carry their own
   responsive scale and would win anyway. What these rules contribute is the
   family, the slant and the case. */
h1,
h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: var(--ls-h2);
    line-height: var(--lh-h2);
    text-wrap: balance;
}

h1 {
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-object);
    line-height: var(--lh-object);
    text-wrap: balance;
}

/* --- Utility type --------------------------------------------------------
   Every figure and every small label on this site. */

.t-util {
    font-family: var(--font-util);
    font-size: var(--t-util);
    line-height: var(--lh-util);
    letter-spacing: var(--ls-util);
}

/* The small all-caps label above a section: SHOP, FILTER, SUBTOTAL.
   font-style is explicit because some of these are headings and would
   otherwise inherit the oblique. A label is a utility, not a section name —
   one role, one treatment, whatever element carries it. */
.eyebrow,
.t-label {
    font-family: var(--font-util);
    font-size: var(--t-label);
    font-weight: 400;
    font-style: normal;
    letter-spacing: var(--ls-label);
    line-height: var(--lh-label);
    text-transform: uppercase;
    color: var(--ink-secondary);
}

.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

a {
    color: inherit;
    text-decoration: none;
}

::placeholder {
    color: var(--ink-tertiary);
    opacity: 1;   /* Firefox dims placeholders on top of the colour */
}

::selection {
    background: var(--black);
    color: var(--bone);
}

/* The site had no focus styling at all before this. */
:focus-visible {
    outline: 2px solid var(--court);
    outline-offset: 2px;
}

/* Respect the OS setting. Every transition on this site is decorative —
   including the splash-screen condense, which is why this is unqualified. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}