/* Oxygon design tokens, read off the SwiftUI source.
 *
 * Colours are Theme.swift + AccentColorPreference.swift; the ink/separator values
 * are UIKit's semantic colours, which the app uses via `.primary`/`.secondary` and
 * so never spells out itself. Type sizes are Apple's text-style metrics at Dynamic
 * Type Large. Layout caps are Theme.readableWidth and the fixed regular-width
 * columns. Every screen ported to the web reads from here rather than re-deriving.
 */
:root {
  color-scheme: light dark;

  /* --- surfaces --- */
  --bg:              #E8F0FC;                 /* Theme.swift:13 */
  --card:            rgba(255,255,255,0.65);  /* Theme.swift:17 — translucent in light */
  --chip-unselected: rgba(0,0,0,0.06);        /* Theme.swift:21 */
  /* `.ultraThinMaterial` — the iPad Splits panel. */
  --material-thin:   rgba(255,255,255,0.45);

  /* --- ink (UIKit semantics) --- */
  --ink:             #000000;
  --ink-secondary:   rgba(60,60,67,0.60);
  --separator:       rgba(60,60,67,0.29);

  /* --- accent: blue is the default; swap the pair to switch --- */
  --accent:          #007AFF;                 /* AccentColorPreference.swift:20 */
  --on-accent:       #FFFFFF;                 /* AccentColorPreference.swift:31 */
  --accent-hairline: rgba(0,122,255,0.40);    /* the .opacity(0.4) card stroke */
  --accent-area-top: rgba(0,122,255,0.25);    /* SplitsView chart gradient */
  --accent-area-bot: rgba(0,122,255,0.02);

  /* --- fixed semantics: never tint these with the accent (Theme.swift:27-49) --- */
  --race-type:       #C92129;
  --workout-type:    #5DCAA5;
  --connected:       #17A863;
  --attention:       #CC800D;

  /* --- type --- */
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-caption2:    11px;
  --font-caption:     12px;
  --font-footnote:    13px;
  --font-subheadline: 15px;   /* the workhorse */
  --font-body:        17px;
  --font-headline:    17px;   /* weight 600 baked in */
  --font-title3:      20px;
  --font-title:       28px;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* --- spacing --- */
  --space-1:  2px;  --space-2:  4px;  --space-3:  6px;
  --space-4:  8px;  --space-5: 10px;  --space-6: 12px;
  --space-7: 14px;  --space-8: 16px;  --space-9: 20px;

  /* --- radii (SwiftUI .continuous squircles; plain radius here) --- */
  --radius-md:   10px;
  --radius-xl:   14px;
  --radius-card: 18px;   /* .cardStyle() — Theme.swift:70 */
  --radius-panel: 22px;
  --radius-pill: 9999px;

  /* --- strokes --- */
  --stroke-hairline: 1px;
  --stroke:          1.5px;
  --stroke-chart:    2.5px;

  /* --- layout caps (Theme.readableWidth) --- */
  --width-default: 640px;   /* Theme.swift:82 */
  --width-tools:   820px;   /* regular width only — MoreToolsView.swift:90 */
  --width-library: 900px;   /* regular width only — LibraryView.swift:69 */

  /* --- fixed columns, regular width only --- */
  --col-splits: 380px;      /* CalculatorView.swift:36 */
  --col-chat:   400px;
  --col-day:    460px;      /* CoachPlannerView.swift:254 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #0B0F19;                    /* Theme.swift:14 */
    --card:            #212630;                    /* Theme.swift:18 — opaque in dark */
    --chip-unselected: rgba(255,255,255,0.10);     /* Theme.swift:22 */
    --material-thin:   rgba(30,36,48,0.55);

    --ink:             #FFFFFF;
    --ink-secondary:   rgba(235,235,245,0.60);
    --separator:       rgba(84,84,88,0.60);

    --accent:          #0A84FF;
    --accent-hairline: rgba(10,132,255,0.40);
    --accent-area-top: rgba(10,132,255,0.25);
    --accent-area-bot: rgba(10,132,255,0.02);

    --race-type:       #FF5961;
    --connected:       #3DD47A;
    --attention:       #FFB53D;
  }
}

/* The four non-default accents have no light/dark variant.
   Set --accent and --on-accent together; nothing else changes. */
[data-accent="orange"]  { --accent:#FF6B00; --on-accent:#000; --accent-hairline:rgba(255,107,0,.40);
                          --accent-area-top:rgba(255,107,0,.25); --accent-area-bot:rgba(255,107,0,.02); }
[data-accent="green"]   { --accent:#6BFF00; --on-accent:#000; --accent-hairline:rgba(107,255,0,.40);
                          --accent-area-top:rgba(107,255,0,.25); --accent-area-bot:rgba(107,255,0,.02); }
[data-accent="magenta"] { --accent:#FF00A3; --on-accent:#FFF; --accent-hairline:rgba(255,0,163,.40);
                          --accent-area-top:rgba(255,0,163,.25); --accent-area-bot:rgba(255,0,163,.02); }
[data-accent="yellow"]  { --accent:#FEC600; --on-accent:#000; --accent-hairline:rgba(254,198,0,.40);
                          --accent-area-top:rgba(254,198,0,.25); --accent-area-bot:rgba(254,198,0,.02); }

/* Every ticking number in the app uses monospacedDigit(). */
.tabular { font-variant-numeric: tabular-nums; }

/* ── Tab bar ─────────────────────────────────────────────────────────────────
   The iOS app's bottom tab bar. Each web screen was built standalone by a
   different agent, so this is the one shared piece: the same markup in every
   page, styled once here. Fixed, so it survives a long scroll the way the
   native bar does. */
body { padding-bottom: 76px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--material-thin, var(--card));
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--accent-hairline, transparent);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 72px; padding: 6px 10px; border-radius: var(--radius-pill, 999px);
  font: var(--font-caption); color: var(--ink-secondary);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.tabbar a[aria-current="page"] { color: var(--on-accent); background: var(--accent); }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }