/* Design tokens. Every color, spacing, radius, and type size used by app.css lives here.
   Rebrand by editing this file only. */
:root {
  /* Color: surfaces. The app shell (page, top bar, tab bar) uses the game card's navy/gold system; the
     card's own tokens are the card group further down. */
  --color-bg: #050B16;                     /* page: the darkest navy */
  --color-bg-glow: #0F2246;                /* soft navy glow at the top of the page */
  --bg-page: radial-gradient(110% 50% at 50% 0%, var(--color-bg-glow) 0%, var(--color-bg) 70%) var(--color-bg);
  --color-surface: #0A1730;
  --color-surface-raised: #0F2142;
  --color-surface-sunken: #050B16;
  --color-border: rgba(212, 169, 64, 0.45);        /* the thin gold hairline: under the top bar, over the tab bar */
  --color-border-strong: rgba(212, 169, 64, 0.65);

  /* Color: text */
  --color-text: #F3F6FB;
  --color-text-soft: #C9D4E5;              /* the team name in the top bar */
  --color-text-muted: #8EA2C2;             /* muted blue-gray: inactive tabs, counts */
  --color-text-faint: #5F7399;
  --color-text-on-accent: #071018;

  /* Color: brand + status. The top-bar brand is the logo image (logo-puckline-cinematic.webp, sized by
     --size-brand-logo below). Gold is the accent: the active tab. The stale-data banner keeps its
     warning color. */
  --color-accent: #F3D27A;
  --color-accent-soft: rgba(216, 166, 58, 0.12);
  --color-warn: #ffb547;
  --color-warn-soft: rgba(255, 181, 71, 0.12);
  --color-overlay: rgba(10, 23, 48, 0.92);   /* top bar + tab bar: navy, blurred over the page */

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Type. The section heading ("UPCOMING") and its game count use the card's type (card tokens). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--card-font-head);
  --font-body: var(--card-font-body);
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-team: 12.5px;    /* the team name in the top bar; it wraps to two lines at 360px */
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
  --line-tight: 1.2;
  --line-normal: 1.45;
  --letter-caps: 0.06em;
  --letter-caps-wide: 0.12em;
  --letter-tight: -0.01em;

  /* Sizes */
  --size-brand-logo: 40px;     /* top-bar logo height (logo-puckline-cinematic.webp, 394x132; width auto) */
  --size-icon: 22px;
  --size-icon-sm: 14px;
  --size-topbar: 52px;
  --size-tabbar: 60px;
  --width-content: 980px;
  --width-card-min: 340px;

  /* Effects */
  --shadow-bar: 0 1px 0 var(--color-border);   /* the top bar's gold hairline */
  --blur-bar: 12px;
  --stroke-icon: 1.8;

  /* Login page (server only; templates/login.html): the one centered passphrase card. The frame, the
     gold button and the logo are the card's brand tokens; the field is a sunken navy well. */
  --login-card-w: 380px;
  --login-logo-h: 48px;        /* the top-bar logo, a little larger, centered in the card */
  --login-field-h: 46px;       /* the passphrase field and the Enter button */
  --login-field-bg: rgba(5, 11, 22, 0.7);
  --login-field-line: rgba(141, 170, 214, 0.35);
  --font-size-field: 16px;     /* never smaller: phones zoom into a smaller field on focus */
}

/* ---- Game card (navy + gold; design of record: docs/mockups/task4d_card_mockup.html) ---------
   Every value the card family uses (card shell, header, hero, comparison, market modules, details,
   artwork sizes, panel surfaces, fallback crest). Change one here and the whole family follows. */
:root {
  /* Navy depth: page < card < module */
  --card-navy-card: #0A1730;
  --card-navy-card-top: #11264A;
  --card-navy-mod: #0F2142;
  --card-navy-mod-2: #0C1B36;
  --card-navy-row: #132A50;
  --card-navy-row-2: #0D2145;
  --card-navy-badge: #0B1A34;
  --card-navy-badge-2: #081428;

  /* Gold: the brand color only, never a favorite/winner marker */
  --card-gold: #D8A63A;
  --card-gold-hi: #F3D27A;
  --card-gold-line: linear-gradient(135deg, #7A5712 0%, #C8932B 16%, #F8E6AE 29%, #DDAA3E 41%, #A87A1E 58%, #E2B651 74%, #FFF1C8 83%, #B9892A 100%);
  --card-gold-glint: radial-gradient(50% 100% at 50% 50%, rgba(255, 246, 214, 0.95) 0%, rgba(255, 232, 160, 0.45) 45%, transparent 100%);
  --card-gold-text: linear-gradient(180deg, #FFF1C2 0%, #F1CB62 45%, #C89530 100%);
  --card-gold-soft: rgba(212, 169, 64, 0.35);
  --card-gold-ring: rgba(212, 169, 64, 0.32);
  --card-strip-bg: linear-gradient(90deg, rgba(212, 169, 64, 0.10), rgba(212, 169, 64, 0.03));
  --card-vrule: linear-gradient(180deg, transparent, var(--card-gold) 25%, var(--card-gold) 75%, transparent);

  /* Text + dividers */
  --card-text: #F3F6FB;
  --card-text-2: #C9D4E5;
  --card-muted: #8EA2C2;
  --card-divider: rgba(141, 170, 214, 0.18);

  /* Surfaces, depth, glow */
  --card-ice: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9px),
              repeating-linear-gradient(28deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 13px),
              radial-gradient(120% 60% at 50% 0%, var(--card-navy-card-top) 0%, var(--card-navy-card) 60%);
  --card-mod-bg: linear-gradient(180deg, var(--card-navy-mod), var(--card-navy-mod-2));
  --card-badge-bg: linear-gradient(180deg, var(--card-navy-badge), var(--card-navy-badge-2));
  /* Panel surfaces: borderless texture plates (panel-surface-standard.webp / panel-surface-market.webp,
     1100x265) drawn INSIDE the existing angled frames as the panel background, centered and cropped
     (cover), under a navy gradient so the text stays dominant: readable first, texture second.
     Standard = game header, comparison table, View Details row and the expanded details; market =
     Spread, Moneyline and Total, one shared treatment. Absolute /static paths on purpose: browsers do
     not all resolve a relative url() inside a custom property against the same base. */
  --card-surface-standard-shade: linear-gradient(180deg, rgba(10, 23, 48, 0.55), rgba(8, 18, 38, 0.70));
  --card-surface-standard-img: url("/static/assets/puckline/panel-surface-standard.webp");
  --card-surface-standard: var(--card-surface-standard-shade), var(--card-surface-standard-img) center / cover no-repeat;
  --card-surface-market-shade: linear-gradient(180deg, rgba(10, 23, 48, 0.50), rgba(8, 18, 38, 0.68));
  --card-surface-market-img: url("/static/assets/puckline/panel-surface-market.webp");
  --card-surface-market: var(--card-surface-market-shade), var(--card-surface-market-img) center / cover no-repeat;
  --card-row-bg: linear-gradient(180deg, var(--card-navy-row), var(--card-navy-row-2));
  --card-row-ring: inset 0 0 0 1px var(--card-gold-ring), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --card-glow: 0 0 14px rgba(212, 169, 64, 0.20);
  --card-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
  --card-inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --card-inner-depth: inset 0 -12px 20px rgba(0, 0, 0, 0.28);
  --card-logo-shadow: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  --card-abbr-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  --card-score-glow: drop-shadow(0 0 8px rgba(243, 210, 122, 0.28)) drop-shadow(0 2px 0 rgba(40, 26, 4, 0.9));
  --card-icon-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));     /* market + View Details icons */
  --card-accent-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));   /* header crown */
  --card-puck-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));     /* ICE TILT puck */
  --card-crest-ink-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.6);  /* team code on the fallback crest: readable, no badge behind it */
  --card-hover: brightness(1.12);
  --card-press: brightness(0.95);

  /* ICE TILT + rink photo. The photo is a background layer: 140% of the hero's height, top-aligned and
     cropped (object-fit: cover), so its center-ice crown lands under the ICE TILT line rather than
     behind the projected score; the navy shade over it keeps the content dominant. Adds no height. */
  --card-tilt-track: rgba(201, 212, 229, 0.45);
  --card-rink-opacity: 0.55;
  --card-rink-h: 140%;
  --card-rink-shade: radial-gradient(70% 80% at 50% 50%, rgba(8, 20, 40, 0.35), rgba(8, 20, 40, 0.8));

  /* Frame geometry */
  --card-bw: 1.5px;            /* the one gold hairline */
  --card-cut: 12px;            /* chamfer, modules */
  --card-cut-card: 16px;       /* chamfer, outer card */
  --card-cut-badge: 9px;       /* chamfer, date badge */
  --card-clip-overlap: 0.6px;  /* inner panel overlaps the hairline at the chamfer */
  --card-row-radius: 4px;      /* market rows: slightly softened, not pills */

  /* Spacing rhythm */
  --card-gap: 8px;
  --card-pad-x: 14px;
  --card-space-2: 2px;
  --card-space-3: 3px;
  --card-space-4: 4px;
  --card-space-5: 5px;
  --card-space-6: 6px;
  --card-space-7: 7px;
  --card-space-8: 8px;
  --card-space-9: 9px;
  --card-space-10: 10px;
  --card-space-12: 12px;
  --card-space-13: 13px;
  --card-space-14: 14px;

  /* Sizes (clamp() so the card fits 360-430px). Artwork sizes are CSS sizes; every WebP in
     static/assets/puckline/ is at least about 3x its largest CSS size, for 3x phone screens. */
  --card-cmp-row-h: 34px;
  --card-market-row-h: 32px;
  --card-details-row-h: 44px;
  --card-title-w: 44%;
  --card-cmp-label-w: 76px;
  --card-logo-w: clamp(64px, 19vw, 84px);   /* a team logo or the fallback crest, hero (object-fit: contain); the image box IS this box */
  --card-logo-h: clamp(45px, 13vw, 59px);   /* about 7px shorter since task 4e, paying for most of the gap below */
  --card-logo-gap: 17px;       /* hero: logo box -> team code, clear of the logo's drop shadow, even an opaque square logo's (task 4e) */
  --card-row-logo-w: 16px;     /* a team logo or the fallback crest, market row */
  --card-row-logo-h: 14px;
  --card-row-logo-pad: 2px;    /* market row: inner padding around the logo, so a wide logo never touches the code or the row edge (task 4e) */
  --card-row-logo-gap: 7px;    /* market row: logo box -> team code (task 4e; was 5px) */
  --card-crest-fs: clamp(12px, 3.8vw, 16px); /* team code overlaid on the hero fallback crest (hero only: market-row crests stay blank); the shield fill is about 62% of the drawn crest width */
  --card-crest-ink-dy: 0.045;  /* overlay nudge, a fraction of the hero logo box height: down from the box center to the shield body (the crown takes the top third) */
  --card-accent-w: 66px;       /* header crown (brand-crown-master.webp, 261x150: the only crown asset) */
  --card-accent-h: 44px;
  --card-icon: 28px;           /* spread / moneyline / total icons (96x96), all three identical; 30px overflows MONEYLINE at 360px */
  --card-icon-sm: 24px;        /* View Details icon (96x96), slightly smaller */
  --card-chev-w: 16px;         /* View Details chevron (icon-chevron-right.webp, 62x72) */
  --card-chev-h: 19px;
  --card-tilt-w: clamp(104px, 30vw, 132px);
  --card-tilt-h: 18px;
  --card-puck-w: 24px;         /* ICE TILT puck marker (96x91) */
  --card-puck-h: 23px;
  --card-line-w: 1px;          /* dividers and vertical rules */
  --card-tilt-line: 2px;       /* ICE TILT track and center mark */
  --card-vrule-cmp: 16px;
  --card-vrule-row: 14px;
  --card-vrule-head: 34px;
  --card-vrule-details: 22px;
  --card-focus-w: 2px;
  --card-focus-offset: 3px;

  /* Type: Barlow Condensed = headings, labels, key numbers; Barlow = names, supporting text;
     Barlow Semi Condensed (tabular figures) = values */
  --card-font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --card-font-num: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --card-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --card-fs-tilt: 9.5px;
  --card-fs-sub: 10.5px;
  --card-fs-label: 11px;
  --card-fs-meta: 11px;
  --card-fs-small: 12px;
  --card-fs-dow: 13px;
  --card-fs-strip: 14px;
  --card-fs-ident: 16px;
  --card-fs-details: 17px;
  --card-fs-cmp: 18px;
  --card-fs-date: 19px;
  --card-fs-time: 27px;
  --card-fs-title: clamp(17px, 5.2vw, 21px);
  --card-fs-market: clamp(14px, 4.4vw, 17px);
  --card-fs-abbr: clamp(30px, 9.5vw, 42px);
  --card-fs-score: clamp(40px, 12.5vw, 56px);
  --card-fw-medium: 500;
  --card-fw-semi: 600;
  --card-fw-bold: 700;
  --card-fw-heavy: 800;
  --card-lh-score: 0.9;
  --card-lh-solid: 1;
  --card-lh-sub: 1.15;
  --card-lh-name: 1.2;
  --card-lh-foot: 1.45;
  --card-ls-abbr: 0.01em;
  --card-ls-title: 0.03em;
  --card-ls-head: 0.04em;
  --card-ls-strip: 0.06em;
  --card-ls-sub: 0.1em;
  --card-ls-details: 0.12em;
  --card-ls-label: 0.14em;
  --card-ls-loc: 0.16em;
  --card-ls-dow: 0.2em;
  --card-ls-tilt: 0.22em;

  /* Opacity */
  --card-o-vrule: 0.75;
  --card-o-vrule-row: 0.55;
  --card-o-glint-2: 0.55;
  --card-o-tilt-label: 0.85;

  /* Motion (nothing loops; all of it is off under prefers-reduced-motion) */
  --card-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --card-dur-puck: 0.7s;
  --card-delay-puck: 0.15s;
  --card-dur-open: 0.3s;
  --card-dur-chev: 0.25s;
  --card-dur-hover: 0.15s;
  --card-chev-open: 90deg;
}

/* Self-hosted card fonts, latin subset (static/fonts/; SIL Open Font License in static/fonts/OFL.txt). */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/BarlowCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/BarlowCondensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/BarlowCondensed-800Italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/BarlowSemiCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/BarlowSemiCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Barlow-600.woff2") format("woff2"); }

/* ---- Results tab (design of record: docs/mockups/task6_results_mockup.html) -------------------
   Settled-market colors and the compact result row. Every check or X is the selected team's own: green
   = it won / covered, red = it lost / did not cover; the opponent's rows and the total's other side are
   dimmed; the total's row that happened gets a neutral light outline. Gold marks nothing. */
:root {
  --settle: #5FCB93;                                /* muted green: the selected team won / covered */
  --settle-bg: rgba(95, 203, 147, 0.12);
  --settle-line: rgba(95, 203, 147, 0.55);
  --settle-tint: linear-gradient(180deg, rgba(95, 203, 147, 0.10), rgba(95, 203, 147, 0.03));
  --miss: #E06A64;                                  /* muted red: the selected team lost / did not cover */
  --miss-line: rgba(224, 106, 100, 0.55);
  --miss-tint: linear-gradient(180deg, rgba(224, 106, 100, 0.10), rgba(224, 106, 100, 0.03));
  --loss-dim: 0.42;                                 /* the opponent's rows and the total's other side */
  --hit-line: rgba(201, 212, 229, 0.55);            /* the total's row that happened: neutral outline */
  --res-row-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --res-chip-ring: rgba(141, 170, 214, 0.22);
  --res-tag-line: rgba(141, 170, 214, 0.4);
  --res-month-line: rgba(212, 169, 64, 0.55);       /* month divider rule: part of the brand frame, so gold */
  --res-final-shadow: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7));   /* the final score: white, no gold glow */
  --res-logo-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));

  /* Sizes */
  --res-logo-w: 30px;          /* the opponent logo or crest in the compact row */
  --res-logo-h: 28px;
  --res-date-w: 38px;
  --res-va-w: 22px;
  --res-chev-w: 13px;          /* compact-row chevron (icon-chevron-right.webp) */
  --res-chev-h: 16px;
  --res-mark: 13px;            /* the check / X */
  --res-chip-h: 26px;
  --res-tag-h: 18px;
  --res-tag-pad: 7px;
  --res-tag-radius: 9px;
  --res-vrule-record: 30px;

  /* Type */
  --res-fs-va: 17px;
  --res-fs-dow: 10.5px;
  --res-fs-md: 15px;
  --res-fs-code: 20px;
  --res-fs-name: 11.5px;
  --res-fs-wl: 13px;
  --res-fs-num: 22px;
  --res-fs-chip: 13px;
  --res-fs-chip-k: 10px;
  --res-fs-act: 12px;
  --res-fs-tag: 9.5px;
  --res-fs-month: 13px;
  --res-fs-record: 22px;
  --res-fs-record-small: 13px;
  --res-fs-record-lbl: 10px;
  --res-fs-foot: 11px;
  --res-fs-legend: 11.5px;
  --res-fs-proj: 11px;
  --res-fs-proj-val: 13px;
  --res-lh-legend: 1.5;
  --res-ls-va: 0.06em;
  --res-ls-dow: 0.18em;
  --res-ls-md: 0.03em;
  --res-ls-wl: 0.12em;
  --res-ls-chip-k: 0.12em;
  --res-ls-tag: 0.16em;
  --res-ls-month: 0.22em;
  --res-ls-record-lbl: 0.14em;
  --res-ls-proj-val: 0.02em;
  --res-o-chev: 0.9;
}