:root {
  /* === COLOR PALETTE === */

  /* Primary brand color (used for CTAs, active states, links) */
  --color-primary-50: #EEF2F7;    /* lightest tint */
  --color-primary-100: #CEDDEE;
  --color-primary-200: #A0C2E9;
  --color-primary-300: #6AA6EC;
  --color-primary-400: #3C8FF1;
  --color-primary-500: #147EFB;   /* base primary */
  --color-primary-600: #006CEB;
  /* Text use of primary color — passes WCAG AA (>=4.5:1 on white).
     Use this anywhere primary-500 would otherwise render as small text,
     where its 4.4:1 contrast against #FFFFFF fails AA. */
  --color-primary-text: var(--color-primary-600);
  --color-primary-700: #0059C3;
  --color-primary-800: #00499F;
  --color-primary-900: #003B80;   /* darkest shade */

  /* Secondary accent (used for secondary actions, highlights) */
  --color-secondary-500: #06B6D4;

  /* Semantic colors */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Functional semantic colors (use these for meaning, not decoration) */
  --color-improvement: var(--color-success);     /* lap time gained, parameter improvement */
  --color-tradeoff: var(--color-warning);        /* setup compromise, moderate confidence */
  --color-regression: var(--color-error);        /* lap time lost, low confidence */
  --color-informational: var(--color-info);      /* neutral data, tips */

  /* Data display */
  --font-data: var(--font-mono);                 /* monospaced for numerical values — ensures alignment in tables */
  --color-data-primary: var(--color-primary-500); /* driver's data in charts */
  --color-data-comparison: var(--color-gray-400); /* comparison/reference data in charts */
  --color-surface-locked: rgba(0, 0, 0, 0.03);  /* background tint for locked parameters */

  /* Neutral grays (used for text, borders, backgrounds) */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Surface colors — reference MudBlazor's active palette so they stay in sync with _isDarkMode */
  --color-surface: var(--mud-palette-surface, #FFFFFF);
  --color-surface-elevated: var(--mud-palette-surface, #FFFFFF);
  --color-background: var(--mud-palette-background, #F9FAFB);

  /* Text colors */
  --color-text-primary: var(--mud-palette-text-primary, #111827);
  --color-text-secondary: var(--mud-palette-text-secondary, #4B5563);
  /* Tertiary text — for body text that should look demoted but still pass WCAG AA (>=4.5:1).
     Tracks MudBlazor's text-secondary so dark mode flips automatically. */
  --color-text-tertiary: var(--mud-palette-text-secondary, #6B7280);
  /* Backward-compat alias; do NOT use for genuinely disabled controls. */
  --color-text-muted: var(--color-text-tertiary);
  /* Reserved for actually-disabled UI (controls/buttons/inputs) where AA contrast
     is exempted by WCAG. Never use for body text. */
  --color-text-disabled: var(--mud-palette-text-disabled, #9CA3AF);
  --color-text-inverse: #FFFFFF;

  /* === TYPOGRAPHY === */
  --font-heading: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale (modular scale, ratio 1.25) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* === SPACING (4px base unit) === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* === SAFE AREA INSETS (iOS notch / home indicator) === */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* === BORDERS & RADII === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-color: var(--mud-palette-divider, #E5E7EB);

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* === MOTION SYSTEM (modern UI vocabulary, 2026 industry-standard easings) ===
     Use --motion-* for new interactions; --transition-* above is the legacy
     name kept for back-compat. Naming follows Material Motion + Apple HIG. */
  --motion-instant: 80ms;     /* immediate feedback (button press, ripple) */
  --motion-fast:    150ms;    /* hover state changes (lift, glow) */
  --motion-base:    250ms;    /* entrances, exits, simple state */
  --motion-slow:    400ms;    /* stagger entrances, panel slides */
  --motion-deliberate: 600ms; /* number count-up, valueHighlight */

  /* Easing curves (cubic-bezier defs) — picked to match the most-used
     modern app interactions:
       out-quart   — snappy, decelerating; great for entrances (Linear,
                     Vercel, Reddit feed cards).
       in-out-cubic — smooth, symmetric; great for state changes.
       spring      — slight overshoot bounce; great for "playful" tappy
                     interactions (Reddit subscribe button, Apple sheets).
       out-back    — gentle overshoot; great for things appearing
                     decisively (FAB pop-in, snackbar). */
  --ease-out-quart:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-back:     cubic-bezier(0.34, 1.46, 0.64, 1);

  /* Stagger step — delay between sequential items in a list / grid. */
  --stagger-step: 20ms;

  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* AppBar height — published by appBarScrollHide.js after measuring,
     but declared here so first-paint sticky elements use the right value
     before JS runs. Matches KartingTheme.AppbarHeight (Shared/KartingTheme.cs). */
  --karting-appbar-height: 56px;
  --karting-appbar-offset: 56px;
}


/* === TYPOGRAPHY UTILITY CLASSES === */
.k-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.k-strong {
    font-weight: var(--font-semibold);
}

/* Medium-weight text — for labels, subtle emphasis, and field metadata
   that should sit between body weight (400) and k-strong (600). */
.k-medium {
    font-weight: var(--font-medium);
}

.k-metric-value {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Tertiary text utility — replacement for inline opacity on captions/timestamps/placeholders. */
.k-text-tertiary {
    color: var(--color-text-tertiary);
}

/* === LAYOUT UTILITIES === */

/* Page-narrow containers — caps wizards / forms / share viewers on desktop so
   they don't stretch edge-to-edge, while remaining full-width on mobile.
   Replaces inline `style="max-width: Xpx; margin: 0 auto;"` across the app. */
.k-page-narrow {
    max-width: 720px;
    margin-inline: auto;
}

.k-page-narrow--wide {
    max-width: 800px;
    margin-inline: auto;
}

/* Subtle-grey surface — used for expanded detail rows, drill suggestion
   panels, and similar "stepped down" surfaces. Replaces inline
   `style="background: var(--mud-palette-background-grey);"` across the app. */
.k-surface-muted {
    background: var(--mud-palette-background-grey);
}

/* Semantic tint surfaces — light-fill panels for calculator result cards
   and other "this number is good/bad/notable" callouts. Replaces inline
   `style="background-color: var(--mud-palette-X-lighten);"` across the
   Calculations panels. Use the matching Color.X on text/icons inside. */
.k-tint-info     { background-color: var(--mud-palette-info-lighten); }
.k-tint-success  { background-color: var(--mud-palette-success-lighten); }
.k-tint-warning  { background-color: var(--mud-palette-warning-lighten); }
.k-tint-error    { background-color: var(--mud-palette-error-lighten); }
.k-tint-primary  { background-color: var(--mud-palette-primary-lighten); }

/* Master-detail empty placeholder — the centered "Pick a …" pane that
   appears on the right side of every list page (Karts, Motors, Sessions,
   Race Day, Pit Mechanic) before a selection is made. The min-height
   clamps to a sensible viewport fraction; text-align:center is applied
   so the icon + heading + body inside line up. Replaces an identical
   inline `style="min-height: clamp(200px, 30vh, 400px); text-align: center;"`
   on five separate pages. */
.k-master-detail-empty {
    min-height: clamp(200px, 30vh, 400px);
    text-align: center;
}

/* Single-line cell — prevents wrapping on table cells where line breaks
   would make the data hard to scan (timestamps, byte counts, latencies).
   Replaces 20+ inline `style="white-space: nowrap;"` declarations in the
   admin diagnostics tables. */
.k-nowrap {
    white-space: nowrap;
}

/* Inline icon baseline correction — when a MudIcon sits inside a MudText
   block, its default `vertical-align: baseline` makes the icon drop below
   the text x-height. align-middle pulls it back into the text rhythm. */
.k-icon-inline {
    vertical-align: middle;
}

/* Single-line text truncation with ellipsis. Width caps with viewport-aware
   clamps so the truncation point makes sense at every breakpoint. Replaces
   the multi-property "max-width: clamp(...); overflow: hidden;
   text-overflow: ellipsis; white-space: nowrap; display: block;" inline
   blocks used across admin diagnostics. */
.k-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.k-truncate--narrow {
    max-width: clamp(200px, 30vw, 600px);
}

.k-truncate--wide {
    max-width: clamp(240px, 40vw, 600px);
}

/* === MODERNIZED CARD CORNERS ===
   MudCard's default 8 px radius reads conservative against the rest of the
   2026 web (Reddit cards 16 px, Linear cards 12 px, Stripe cards 12 px).
   Bumping to 12 px is a subtle but immediate "this app was designed in the
   2020s" cue. Buttons and inputs stay at the theme default (8 px) so they
   read snappy, not soft. */
.mud-card {
  border-radius: var(--radius-lg);
}

/* === BASE STYLES === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No global scroll-behavior: smooth — animating every programmatic/anchor
     scroll made long pages feel heavy (and re-triggered AppBar paint on every
     frame). Call sites that want smoothness pass behavior:'smooth' explicitly
     (e.g. window.karting.scrollElementIntoView in index.html). */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

code, pre, .font-mono {
  font-family: var(--font-mono);
}

a {
  color: var(--color-primary-500);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-600);
}

/* Screen-reader-only utility — visually hidden but accessible to assistive tech */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 1920px) {
    :root {
        --text-xl: 1.5rem;
        --text-2xl: 1.875rem;
        --text-3xl: 2.25rem;
        --text-4xl: 2.75rem;
    }
}