/* JediTrack Design System
   Aviation-inspired, Apple HIG foundation.
   Dark-first with warm amber accents. */

/* ── Typography ─────────────────────────────────────────────── */
/* SF Pro is available natively on Apple devices via -apple-system.
   No external font CDN — system fonts provide the best performance. */

:root {
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.75rem;    /* 28px */
  --text-4xl: 2.125rem;   /* 34px */

  --leading-tight: 1.2;
  --leading-normal: 1.47;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.022em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.06em;

  /* ── Spacing (8px grid) ───────────────────────────────────── */
  --space-0: 0;
  --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 */
  --space-20: 5rem;    /* 80px */

  /* ── Borders & Radii ──────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Transitions ��─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Z-index ─���────────────────────────────────────────────── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tab-bar: 600;
}

/* ── Light Theme (default) ──────────────────────────────────── */

:root,
[data-theme="light"] {
  --color-bg: #f5f5f7;
  --color-bg-elevated: #ffffff;
  --color-bg-secondary: #f0f0f2;
  --color-bg-tertiary: #e8e8ed;
  --color-bg-glass: rgba(255, 255, 255, 0.72);

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #86868b;
  --color-text-inverse: #ffffff;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-separator: rgba(0, 0, 0, 0.06);

  --color-accent: #d4850a;
  --color-accent-hover: #b8730a;
  --color-accent-subtle: rgba(212, 133, 10, 0.1);

  --color-status-active: #34c759;
  --color-status-warning: #ff9f0a;
  --color-status-danger: #ff3b30;
  --color-status-info: #5ac8fa;
  --color-status-neutral: #8e8e93;

  --color-status-active-bg: rgba(52, 199, 89, 0.12);
  --color-status-warning-bg: rgba(255, 159, 10, 0.12);
  --color-status-danger-bg: rgba(255, 59, 48, 0.12);
  --color-status-info-bg: rgba(90, 200, 250, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);

  --tab-bar-bg: rgba(249, 249, 249, 0.94);
  --tab-bar-border: rgba(0, 0, 0, 0.1);
}

/* ── Dark Theme ─────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #000000;
    --color-bg-elevated: #1c1c1e;
    --color-bg-secondary: #2c2c2e;
    --color-bg-tertiary: #3a3a3c;
    --color-bg-glass: rgba(28, 28, 30, 0.82);

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-text-tertiary: #6e6e73;
    --color-text-inverse: #1d1d1f;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-separator: rgba(255, 255, 255, 0.06);

    --color-accent: #e8a430;
    --color-accent-hover: #f0b840;
    --color-accent-subtle: rgba(232, 164, 48, 0.15);

    --color-status-active: #30d158;
    --color-status-warning: #ffd60a;
    --color-status-danger: #ff453a;
    --color-status-info: #64d2ff;
    --color-status-neutral: #636366;

    --color-status-active-bg: rgba(48, 209, 88, 0.15);
    --color-status-warning-bg: rgba(255, 214, 10, 0.15);
    --color-status-danger-bg: rgba(255, 69, 58, 0.15);
    --color-status-info-bg: rgba(100, 210, 255, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    --tab-bar-bg: rgba(28, 28, 30, 0.92);
    --tab-bar-border: rgba(255, 255, 255, 0.08);
  }
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-bg-elevated: #1c1c1e;
  --color-bg-secondary: #2c2c2e;
  --color-bg-tertiary: #3a3a3c;
  --color-bg-glass: rgba(28, 28, 30, 0.82);

  --color-text-primary: #f5f5f7;
  --color-text-secondary: #98989d;
  --color-text-tertiary: #6e6e73;
  --color-text-inverse: #1d1d1f;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-separator: rgba(255, 255, 255, 0.06);

  --color-accent: #e8a430;
  --color-accent-hover: #f0b840;
  --color-accent-subtle: rgba(232, 164, 48, 0.15);

  --color-status-active: #30d158;
  --color-status-warning: #ffd60a;
  --color-status-danger: #ff453a;
  --color-status-info: #64d2ff;
  --color-status-neutral: #636366;

  --color-status-active-bg: rgba(48, 209, 88, 0.15);
  --color-status-warning-bg: rgba(255, 214, 10, 0.15);
  --color-status-danger-bg: rgba(255, 69, 58, 0.15);
  --color-status-info-bg: rgba(100, 210, 255, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

  --tab-bar-bg: rgba(28, 28, 30, 0.92);
  --tab-bar-border: rgba(255, 255, 255, 0.08);
}

/* ── Reset & Base ─��─────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  min-height: 100dvh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { color: var(--color-accent-hover); }

::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-text-tertiary);
  border-radius: var(--radius-full);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}