/* RankUp — static CSS bundle (served directly, bypasses Vite CSS pipeline)
   Contains: design tokens + base reset.
   Tailwind utilities are loaded via CDN in index.html. */

/* ── Design tokens ── */
:root {
  --color-brand-amber:        #f59e0b;
  --color-brand-amber-dim:    #d97706;
  --color-brand-amber-bg:     rgba(245, 158, 11, 0.10);
  --color-brand-amber-border: rgba(245, 158, 11, 0.28);
  --color-brand-navy:         #0F172A;
  --color-brand-navy-mid:     #1e2d4a;
  --color-brand-navy-light:   #263554;

  --color-surface-0: #ffffff;
  --color-surface-1: #f9f6f0;
  --color-surface-2: #f0ece3;
  --color-surface-3: #e8e2d8;

  --color-text-primary:   #1a1410;
  --color-text-secondary: #5c6470;
  --color-text-disabled:  #94a3b8;
  --color-text-inverse:   #ffffff;
  --color-text-brand:     #d97706;

  --color-border-primary:   #c8bfb0;
  --color-border-secondary: #d4cbbf;
  --color-border-tertiary:  #e2dbd0;

  --color-status-info-bg:        #eef4ff;
  --color-status-info-text:      #1d4ed8;
  --color-status-info-border:    #bfdbfe;
  --color-status-success-bg:     #f0fdf4;
  --color-status-success-text:   #15803d;
  --color-status-success-border: #bbf7d0;
  --color-status-warning-bg:     #fffbeb;
  --color-status-warning-text:   #92400e;
  --color-status-warning-border: #fde68a;
  --color-status-danger-bg:      #fef2f2;
  --color-status-danger-text:    #dc2626;
  --color-status-danger-border:  #fecaca;

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);

  --z-base: 0; --z-sticky: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300;
}

/* ── Dark mode ── */
.dark {
  --color-surface-0: #111827;
  --color-surface-1: #1a2236;
  --color-surface-2: #0d1117;
  --color-surface-3: #0a0f1a;

  --color-text-primary:   #f1f5f9;
  --color-text-secondary: #64748b;
  --color-text-disabled:  #374151;

  --color-border-primary:   #1e2d3d;
  --color-border-secondary: #1e2d3d;
  --color-border-tertiary:  #1e2d3d;

  --color-status-info-bg:        #1a2744;
  --color-status-info-text:      #5b9cf6;
  --color-status-info-border:    #1e3a6e;
  --color-status-success-bg:     #0d2b1a;
  --color-status-success-text:   #34c759;
  --color-status-success-border: #0d3b1f;
  --color-status-warning-bg:     #2b2010;
  --color-status-warning-text:   #ffd60a;
  --color-status-warning-border: #4a3800;
  --color-status-danger-bg:      #2b1010;
  --color-status-danger-text:    #ff453a;
  --color-status-danger-border:  #4a1010;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background-color: var(--color-surface-1);
  color: var(--color-text-primary);
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}