/* ============================================================
   AeroEdge design tokens — single source of truth for the APP screens
   (index, coach, sessions, session, profile). Dark is default;
   [data-theme="light"] overrides. Values are the canonical P4 set
   (extracted verbatim from index.html — verified identical across all
   five app screens before extraction).

   NOTE: the auth screens (login / register / subscribe / logout) use a
   DIFFERENT dialect (auth-only --grid-line/--glow/--chip and a different
   light --btn-bg) and intentionally do NOT link this file.
   ============================================================ */
:root, [data-theme="dark"] {
  --bg:        #060608;
  --bg-elev:   #0a0a0d;
  --surface:   #0d0d10;
  --surface2:  #111115;
  --panel:     #0c0c0f;
  --border:    #1e1e26;
  --bordersoft:#15151b;
  --text:      #e8e8ee;
  --muted:     #8a8a98;
  --dim:       #4a4a56;
  --white:     #ffffff;
  --cyan:      #00B5E2;
  --cyan-dim:  #0089ab;
  --green:     #22c55e;
  --danger:    #ef4444;
  --amber:     #f59e0b;
  --on-accent: #060608;
  --btn-bg:    #ffffff;
  --btn-text:  #060608;
  --field-bg:  #060608;
  --chart-bg:  #08080c;
  --sidebar-bg:#040406;
  --logo-plate:transparent;
  --shadow:    0 18px 48px -22px rgba(0,0,0,0.8);
  --shadow-sm: 0 8px 24px -16px rgba(0,0,0,0.7);
  --accent-soft: rgba(0,181,226,0.10);
  --accent-bd:   rgba(0,181,226,0.32);

  /* Landing design-system extensions (geometry + rules + type) */
  --pad:       clamp(20px,4vw,56px);
  --radius:    0;
  --rule:      rgba(242,243,244,.16);
  --rule-soft: rgba(242,243,244,.08);
  --cy-rule:   rgba(0,181,226,.32);
  --cy-field:  rgba(0,181,226,.05);
  /* 7-step type scale */
  --fs-1: 11px;  --fs-2: 12px;  --fs-3: 13px;  --fs-4: 15px;
  --fs-5: 17px;  --fs-6: 22px;  --fs-7: clamp(24px,3.5vw,48px);
}

/* ============================================================
   Base accessibility — applies to every app screen that links this file.
   Brand-safe: uses the cyan token only; touches no other colours or type.
   ============================================================ */

/* Visible keyboard focus (WCAG 2.4.7). :focus-visible shows the ring only for
   keyboard / programmatic focus, never for mouse clicks — pointer users see no
   extra chrome. The app previously defined NO focus styles at all. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Honour the OS "reduce motion" preference (WCAG 2.3.3). Near-instant rather
   than exactly 0s so transitionend / animationend handlers still fire. JS
   smooth-scroll calls are gated separately (they override CSS scroll-behavior). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[data-theme="light"] {
  --bg:        #eef1f4;
  --bg-elev:   #ffffff;
  --surface:   #ffffff;
  --surface2:  #f4f6f9;
  --panel:     #ffffff;
  --border:    #d9dee5;
  --bordersoft:#e7ebf0;
  --text:      #14161c;
  --muted:     #5a6472;
  --dim:       #97a1b0;
  --white:     #14161c;            /* "white" tokens become ink on light bg */
  --cyan:      #0098c4;
  --cyan-dim:  #00b5e2;
  --green:     #16a34a;
  --danger:    #d62828;
  --amber:     #b45309;
  --on-accent: #ffffff;
  --btn-bg:    #14161c;
  --btn-text:  #ffffff;
  --field-bg:  #ffffff;
  --chart-bg:  #f7f9fb;
  --sidebar-bg:#ffffff;
  --logo-plate:#0a0a0d;
  --shadow:    0 18px 48px -26px rgba(20,30,50,0.30);
  --shadow-sm: 0 8px 22px -16px rgba(20,30,50,0.22);
  --accent-soft: rgba(0,152,196,0.08);
  --accent-bd:   rgba(0,152,196,0.34);

  /* Landing rules derived from light ink (#14161c = rgb(20,22,28)).
     .16 is too faint on #eef1f4 so bumped to .22. */
  --rule:      rgba(20,22,28,.22);
  --rule-soft: rgba(20,22,28,.11);
  --cy-rule:   rgba(0,152,196,.32);
  --cy-field:  rgba(0,152,196,.05);
}