/* =========================================================
   THEME / DESIGN TOKENS (single source of truth)
   Brand: #ee6c05
   Dark mode: OS-driven (prefers-color-scheme)
   Mobile + desktop typography + spacing
   ========================================================= */

:root {
  /* Brand */
  --brand: #ee6c05;
  --brand-hover: #ff7a1a;
  --brand-strong: #c75702;
  --on-brand: #111111;

  /* Light mode surfaces */
  --bg: #ffffff;
  --surface: #fbfbfb;
  --surface-2: #f3f4f6;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;

  /* Feedback */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  /* Radius + shadows */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 10px 24px rgba(0,0,0,.10);

  /* Spacing scale */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;

  /* Layout */
  --container: 1120px;
  --header-h: 64px;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --t-sm: 0.95rem;
  --t-base: 1.05rem;
  --t-lg: 1.25rem;
  --t-xl: 1.55rem;
  --t-2xl: 2.1rem;

  /* Focus ring */
  --focus: 0 0 0 3px rgba(238,108,5,.25);

  /* Motion */
  --dur: 160ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --surface: #0f1720;
    --surface-2: #121c28;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: rgba(229,231,235,.14);

    --shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --shadow-2: 0 12px 26px rgba(0,0,0,.45);

    --on-brand: #111111;
    --focus: 0 0 0 3px rgba(238,108,5,.30);
  }
}

/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }