@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,900;1,700;1,900&family=DM+Mono:wght@400;500&family=Barlow:wght@400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* ─── SF BRAND TOKENS ──────────────────────────────────────────────────── */
:root{
  --sf-ink:#083B56;
  --sf-deep-teal:#0F6672;
  --sf-aqua:#56D5D8;
  --sf-soft-aqua:#DDF4F4;
  --sf-surface:#F7FBFB;
  --sf-pink:#F23886;
  --sf-orange:#F89A1C;
  --sf-yellow:#F2D23C;
  --sf-secondary:#5C727A;
  --sf-border:#B7DADD;
  --sf-error:#D65A5A;
  --sf-success:#19B875;
  --sf-shadow-sm:0 2px 8px rgba(8,59,86,0.07);
  --sf-shadow:0 4px 16px rgba(8,59,86,0.09);
  --sf-shadow-md:0 8px 24px rgba(8,59,86,0.11);

  /* ─ App theme: dark sports-tech (not pure black — dark teal) ─ */
  --bg:#071E26;
  --bg1:#0A2630;
  --bg2:#0E2F3A;
  --bg3:#143744;
  --border:rgba(183,218,221,0.16);
  --border2:rgba(183,218,221,0.26);
  --text:#EEF8F9;
  --text2:#8FB8BE;
  --text3:#4D7A82;

  /* ─ Semantic aliases → SF tokens ─ */
  --primary:var(--sf-aqua);
  --primary-light:#8FEAEA;
  --primary-dark:var(--sf-deep-teal);
  --accent:var(--sf-yellow);
  --accent2:var(--sf-orange);
  --pink:var(--sf-pink);
  --danger:var(--sf-error);
  --success:var(--sf-success);

  /* ─ Status color system ─ */
  --green:var(--sf-aqua);
  --yellow:var(--sf-yellow);
  --red:var(--sf-pink);
  --green-bg:rgba(86,213,216,0.10);
  --yellow-bg:rgba(242,210,60,0.10);
  --red-bg:rgba(242,56,134,0.10);
  --green-border:rgba(86,213,216,0.25);
  --yellow-border:rgba(242,210,60,0.25);
  --red-border:rgba(242,56,134,0.25);

  /* ─ Typography ─ */
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
  --font-mono:'DM Mono',monospace;

  /* ─ Spacing & shape ─ */
  --r:12px;
  --r-sm:8px;
  --r-lg:16px;
  --nav-h:52px;
}

/* ─── THEME TOKENS (light default, dark via data-theme) ─────────────────
   --c-* are what screens use for surfaces and text so dark mode can swap
   them. --rgb-* are bare channel lists for rgba(var(--rgb-x),alpha). */
:root{
  color-scheme:light;
  --c-bg:#F4FBFB;
  --c-card:#FFFFFF;
  --c-field:#F4FBFB;
  --c-ink:#083B56;
  --c-text2:#5C727A;
  --c-text-body:#3A5060;
  --c-teal:#0F6672;
  --c-header:rgba(244,251,251,0.96);
  --c-line-strong:rgba(183,218,221,0.5);
  --c-shadow:rgba(8,59,86,0.35);
  --c-tab-on:rgba(86,213,216,0.26);
  --c-tab-ring:rgba(15,102,114,0.12);
  --c-nav:#FFFFFF;
  --rgb-ink:8,59,86;
  --rgb-muted:92,114,122;
  --rgb-soft:221,244,244;
  --rgb-surface:244,251,251;
  --rgb-white:255,255,255;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --c-bg:#071E26;
  --c-card:#0E2F3A;
  --c-field:#143744;
  --c-ink:#EEF8F9;
  --c-text2:#8FB8BE;
  --c-text-body:#C3DCE0;
  --c-teal:#56D5D8;
  --c-header:rgba(7,30,38,0.96);
  --c-line-strong:rgba(183,218,221,0.225);
  --c-shadow:rgba(0,0,0,0.35);
  --c-tab-on:rgba(86,213,216,0.16);
  --c-tab-ring:rgba(86,213,216,0.2);
  --c-nav:#0E2F3A;
  --rgb-ink:238,248,249;
  --rgb-muted:143,184,190;
  --rgb-soft:20,55,68;
  --rgb-surface:14,47,58;
  --rgb-white:14,47,58;
}

/* ─── BASE ─────────────────────────────────────────────────────────────── */
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow:hidden}
#root{height:100%;display:flex;flex-direction:column}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(72px + env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top)}
.screen::-webkit-scrollbar{display:none}
.page{padding:16px}

/* ─── RIDER SCREEN BODY/HTML BACKGROUND ───────────────────────────────── */
/* Override dark bg on html+body for all rider screens — kills dark status-bar strip */
html:has(.rider-dash),html:has(.history-screen),html:has(.profile-screen),
html:has(.stats-screen),html:has(.log-session),html:has(.session-detail),
body:has(.rider-dash),body:has(.history-screen),body:has(.profile-screen),
body:has(.stats-screen),body:has(.log-session),body:has(.session-detail){
  background:var(--c-bg);
}