:root {
  color-scheme: dark;

  /* Core palette */
  --color-bg-app: #0D0F1A;
  --color-bg-surface: #161827;
  --color-bg-surface-elevated: #1B1E31;
  --color-bg-surface-muted: #111423;
  --color-bg-overlay: rgba(13, 15, 26, 0.88);
  --color-bg-input: #121524;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B7BED3;
  --color-text-muted: #7D859E;
  --color-text-inverse: #0D0F1A;

  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-gold: rgba(245, 197, 24, 0.55);

  --color-accent: #F5C518;
  --color-accent-strong: #FFD84A;
  --color-accent-muted: rgba(245, 197, 24, 0.16);

  --color-success: #2ECC71;
  --color-warning: #FFB020;
  --color-danger: #FF5D73;
  --color-info: #5AA9FF;

  /* Typography */
  --font-family-base: "SF Pro Display", "SF Pro Text", "Segoe UI", "Inter", sans-serif;
  --font-family-mono: "SF Mono", "JetBrains Mono", "Fira Code", monospace;

  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.08em;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* Card + layout */
  --card-padding: 20px;
  --page-padding-x: 20px;
  --page-padding-y: 16px;
  --page-gap: 16px;
  --nav-height: 78px;
  --header-height: 64px;
  --fab-offset: 20px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Effects */
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.42);
  --shadow-focus: 0 0 0 3px rgba(245, 197, 24, 0.25);
  --blur-surface: 18px;

  /* Safe areas */
  --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);

  /* Device-oriented content widths */
  --content-max-phone: 480px;
  --content-max-tablet: 1024px;
}

@media (min-width: 768px) {
  :root {
    --page-padding-x: 24px;
    --page-padding-y: 20px;
    --page-gap: 20px;
    --nav-height: 86px;
    --header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-padding-x: 28px;
    --page-padding-y: 24px;
    --page-gap: 24px;
    --nav-height: 92px;
    --header-height: 76px;
  }
}