/* ==========================================================================
   EdP Bet Tracker - design-system layer
   Ecole des Paris - Company B spec (Aug 2026)

   This file carries what a colour swap cannot express: the radius scale, the
   shadow recipes, tabular numerals, focus rings and the uppercase micro-label
   treatment. The palette itself is applied upstream by _brand_transform.py's
   DESIGN_SYSTEM rules, which rewrite the hardcoded hex in every page.

   Loaded last in <head> so it wins over each page's inline <style> at equal
   specificity. Deliberately conservative: this refines an existing, working
   layout - it is not a reset. !important is used only where a page's inline
   style attribute would otherwise win on something brand-critical.

   Brand rule: warm near-black surfaces, ONE gold accent per view, cream text.
   ========================================================================== */

:root {
  /* cool UI layer */
  --edp-bg:#16161a;        --edp-panel:#0d0d0f;     --edp-card:#1d1d22;
  --edp-card-head:#24242b; --edp-border:#2a2a30;
  --edp-text:#f4f4f0;      --edp-soft:#c4c4cc;
  --edp-muted:#8a8a92;     --edp-dim:#6a6a72;

  /* warm premium layer - login, onboarding, banners, modals */
  --edp-warm-bg:#0f0e0a;   --edp-warm-card:#16150f;  --edp-warm-card-2:#14130f;
  --edp-warm-tile:#100e08; --edp-warm-input:#0d0b07;
  --edp-warm-border:#2c2416; --edp-warm-border-2:#3a3018;
  --edp-warm-text:#f4f1e8; --edp-warm-soft:#cabfa6;
  --edp-warm-muted:#9a9184; --edp-warm-muted-2:#b8ad93; --edp-warm-muted-3:#8f866f;

  /* gold accent - the single accent */
  --edp-gold:#e8b53d;      --edp-gold-light:#f7df94; --edp-gold-soft:#f5d27e;
  --edp-gold-deep:#d4a02d; --edp-gold-cream:#fbe9a9; --edp-amber:#fac775;
  --edp-ink-on-gold:#1a1204;

  /* semantic */
  --edp-green:#4ac97e;     --edp-red:#e5484d;        --edp-blue:#5ba3d0;

  /* radius scale */
  --edp-r-sm:6px; --edp-r-md:10px; --edp-r-lg:14px; --edp-r-xl:18px; --edp-r-pill:999px;

  /* shadows / effects */
  --edp-shadow-card:0 12px 30px rgba(0,0,0,.45);
  --edp-shadow-modal:0 30px 70px rgba(0,0,0,.5);
  --edp-glow-gold:0 0 14px rgba(232,181,61,.35);
  --edp-inset-top:inset 0 1px 0 rgba(255,255,255,.05);

  /* gradients */
  --edp-grad-gold-button:linear-gradient(95deg,#f7df94,#e8b53d);
  --edp-grad-gold-text:linear-gradient(92deg,#f7df94,#e8b53d);
  --edp-grad-gold-number:linear-gradient(180deg,#fbe9a9 0%,#e8b53d 58%,#d4a02d 100%);
  --edp-grad-gold-halo:radial-gradient(circle,rgba(232,181,61,.14),transparent 70%);

  --edp-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --edp-font-mono:ui-monospace,Consolas,monospace;
}

/* --- Dark-first: spec forces the background on all three ----------------- */
html, body { background:var(--edp-bg) !important; color:var(--edp-text); }
body { font-family:var(--edp-font); -webkit-font-smoothing:antialiased; }

/* The spec bans web fonts - the OS system font is deliberate. Any page still
   asking for Inter/Poppins is normalised here rather than page by page. */
body, button, input, select, textarea, .card, .btn { font-family:var(--edp-font); }

/* --- Numbers: tabular so digits align in tables and stat tiles ----------- */
table, td, th,
[class*="stat"], [class*="value"], [class*="number"], [class*="odds"],
[class*="record"], [class*="units"], [class*="roi"], [class*="pct"],
.pp-stat-value, .wizard-summary-value {
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* --- Uppercase micro-labels: 10-11px / 700 / .12em ---------------------- */
.pp-stat-label, .wizard-summary-label, .settings-row-label,
.feature-tag, [class*="-label"], [class*="micro"] {
  letter-spacing:.12em;
}

/* --- Card lift + hairline borders --------------------------------------- */
.tracker-card, .card, [class*="-card"], .panel {
  border-radius:var(--edp-r-lg);
  box-shadow:var(--edp-shadow-card);
}
.card-header, [class*="card-head"] { border-radius:var(--edp-r-lg) var(--edp-r-lg) 0 0; }

/* Spec rule: rounded corners only with FULL borders. A single-sided accent
   border must stay square on that side, or the accent bleeds past the arc. */
[style*="border-left"], [style*="border-right"],
[class*="accent-left"] { border-radius:0; }

/* --- Radius scale ------------------------------------------------------- */
.badge, .tag, input[type="text"], input[type="email"],
input[type="password"], input[type="number"] { border-radius:var(--edp-r-sm); }
button, .btn, select, textarea { border-radius:var(--edp-r-md); }
.pill, .chip, .filter-btn, .wizard-chip, .lang-toggle, .lang-opt,
[class*="pill"], [class*="chip"] { border-radius:var(--edp-r-pill); }

/* --- Inputs: warm well + gold focus ring -------------------------------- */
input, select, textarea {
  background:var(--edp-warm-input);
  border:1px solid var(--edp-warm-border);
  color:var(--edp-warm-text);
  font-family:var(--edp-font);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color:#6b6350; }
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--edp-gold);
  box-shadow:0 0 0 3px rgba(232,181,61,.13);
}

/* Keyboard focus stays visible everywhere - the gold ring doubles as the
   accessibility affordance, so it must not vanish along with the outline. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--edp-gold);
  outline-offset:2px;
  border-radius:var(--edp-r-sm);
}

/* --- Modal shell -------------------------------------------------------- */
.modal, .dialog, [class*="modal-content"], [class*="dialog"] {
  background:var(--edp-warm-card);
  border:1px solid var(--edp-warm-border);
  border-radius:16px;
  box-shadow:var(--edp-shadow-modal);
}
.modal-overlay, [class*="overlay"], [class*="backdrop"] { background:rgba(0,0,0,.82); }

/* --- Motion is subtle: 0.15s, gentle press ------------------------------ */
button, .btn, .pill, .chip, .filter-btn, .wizard-chip {
  transition:background-color .15s ease, border-color .15s ease,
             box-shadow .15s ease, transform .15s ease;
}
button:active, .btn:active, .filter-btn:active { transform:scale(.97); }

/* --- Utilities the spec names explicitly (opt-in classes) --------------- */
.edp-gold-text {
  background:var(--edp-grad-gold-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:800;
}
.edp-gold-number {
  background:var(--edp-grad-gold-number);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900; letter-spacing:-.5px; font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 2px 10px rgba(232,181,61,.3));
}
.edp-btn-gold {
  background:var(--edp-grad-gold-button); color:var(--edp-ink-on-gold);
  border:none; border-radius:var(--edp-r-md); padding:11px 18px;
  font-size:14px; font-weight:800; cursor:pointer; font-family:inherit;
  box-shadow:0 8px 22px rgba(232,181,61,.28);
}
.edp-btn-ghost {
  background:transparent; border:1px solid var(--edp-warm-border);
  color:var(--edp-warm-text); border-radius:var(--edp-r-md); padding:11px 18px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}
.edp-halo { background:var(--edp-grad-gold-halo); }
.edp-warm { background:var(--edp-warm-card); border:1px solid var(--edp-warm-border); }

/* --- Semantic win / loss ------------------------------------------------ */
.win, .positive, [class*="-win"], [class*="profit"] { color:var(--edp-green); }
.loss, .negative, [class*="-loss"] { color:var(--edp-red); }
.pending, .in-progress { color:var(--edp-blue); }

/* --- Oli Corner: isolated sub-brand, never reused elsewhere -------------- */
.oli-pill, [class*="oli-"] {
  background:linear-gradient(135deg,#ff7a18,#e7b53c);
  color:#1a0e00;
}
.oli-avatar { border-radius:var(--edp-r-pill); border:1.5px solid #fff; width:26px; height:26px; }

/* --- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- Dashboard nav wordmark ---------------------------------------------
   The shared dashboard styles the brand mark as a 42x42 rounded square with
   object-fit:cover — an app-icon treatment that suits HubersEdge's square
   emblem but crops EdP's 834x265 wordmark down to its middle third. Show the
   whole mark at its natural proportions instead, and drop the leftover Discord
   blurple glow (rgba(88,101,242)) that the palette pass could not reach in
   rgba form. HubersEdge is unaffected: this file only loads on EdP. */
.nav-brand-logo {
  width: auto;
  height: 42px;
  max-width: 200px;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}
@media (max-width: 640px) {
  /* The nav is a single 72px row; a full-width wordmark plus the user controls
     will not fit on a phone, so step the mark down rather than let it wrap. */
  .nav-brand-logo { height: 32px; max-width: 150px; }
}

/* --- Sportsbook settings: drop the US state picker ------------------------
   EdP is Canadian; #pref-state exists only to build state-specific US
   sportsbook deep links, so it is meaningless here.

   Hide the whole "Your Location" settings-section, not just the <select> --
   otherwise the section heading is left stranded above nothing.

   The element is deliberately left IN THE DOM rather than removed: dashboard.php
   reads document.getElementById('pref-state').value when saving sportsbook
   preferences, so deleting it would throw a TypeError on save. Hidden, it simply
   reads "" and getSportsbookUrl() falls back to the non-state URL. dashboard.php
   is mirrored from HubersEdge, so this has to live here in the EdP-only stylesheet
   anyway -- editing the page directly would be overwritten within the hour. */
.settings-section:has(#pref-state) { display: none; }
