/* ── Reset ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}

/* ── Design tokens — light mode ─────────────────────────────────────────────*/
:root{
  /* Surfaces */
  --bg:#F2F2F7;
  --sf:#FFFFFF;
  --sf2:#F8F8FC;
  --sf3:#EFEFF5;
  --sf4:#E8E8F0;

  /* Borders */
  --bd:#E4E4EE;
  --bd2:#C4C4D4;

  /* Text */
  --tx:#0E0E18;
  --tx2:#52526A;
  --tx3:#94949E;

  /* Accent — indigo */
  --ac:#5B5BD6;
  --ac2:#4848C0;
  --acl:rgba(91,91,214,0.07);
  --acm:rgba(91,91,214,0.16);

  /* Semantic — green */
  --gr:#18794E;
  --gr-bg:rgba(24,121,78,0.09);
  --gr-bd:rgba(24,121,78,0.22);

  /* Semantic — red */
  --re:#CD2B31;
  --re-bg:rgba(205,43,49,0.09);
  --re-bd:rgba(205,43,49,0.22);

  /* Semantic — amber */
  --am:#AD5700;
  --am-bg:rgba(173,87,0,0.09);
  --am-bd:rgba(173,87,0,0.22);

  /* Semantic — purple */
  --pu:#7C3AED;
  --pu-bg:rgba(124,58,237,0.09);
  --pu-bd:rgba(124,58,237,0.22);

  /* Early start */
  --early:#0891b2;
  --early-bg:rgba(8,145,178,0.10);
  --early-bd:rgba(8,145,178,0.25);

  /* Radii */
  --r-sm:5px;
  --r:8px;
  --rl:10px;
  --rxl:14px;
  --r-full:999px;

  /* Shadows — three-level system */
  --sh:
    0 1px 2px rgba(14,14,24,0.04),
    0 1px 4px rgba(14,14,24,0.03);
  --shm:
    0 2px 8px rgba(14,14,24,0.06),
    0 4px 18px rgba(14,14,24,0.07);
  --shl:
    0 8px 24px rgba(14,14,24,0.09),
    0 16px 48px rgba(14,14,24,0.08);

  /* Motion */
  --tr:160ms cubic-bezier(0.4,0,0.2,1);
  --tr-spring:220ms cubic-bezier(0.34,1.26,0.64,1);
  --tr-fast:80ms ease;

  /* Focus ring */
  --focus:0 0 0 3px var(--acm);

  /* Legacy compat */
  --tb:rgba(255,255,255,0.94);
  --nb:#111118;
}

/* ── Design tokens — dark mode ───────────────────────────────────────────────*/
:root.dark{
  --bg:#0D0D14;
  --sf:#14141E;
  --sf2:#1A1A28;
  --sf3:#202030;
  --sf4:#272738;
  --bd:rgba(255,255,255,0.07);
  --bd2:rgba(255,255,255,0.13);
  --tx:#EDEDF4;
  --tx2:#7878A0;
  --tx3:#48485E;
  --acl:rgba(91,91,214,0.13);
  --acm:rgba(91,91,214,0.22);
  --gr-bg:rgba(24,121,78,0.14);
  --gr-bd:rgba(24,121,78,0.30);
  --re-bg:rgba(205,43,49,0.14);
  --re-bd:rgba(205,43,49,0.30);
  --am-bg:rgba(173,87,0,0.14);
  --am-bd:rgba(173,87,0,0.30);
  --pu-bg:rgba(124,58,237,0.14);
  --pu-bd:rgba(124,58,237,0.30);
  --early-bg:rgba(8,145,178,0.14);
  --early-bd:rgba(8,145,178,0.30);
  --sh:
    0 1px 2px rgba(0,0,0,0.28),
    0 1px 4px rgba(0,0,0,0.20);
  --shm:
    0 4px 12px rgba(0,0,0,0.36),
    0 2px 6px rgba(0,0,0,0.24);
  --shl:
    0 12px 40px rgba(0,0,0,0.50),
    0 4px 12px rgba(0,0,0,0.32);
  --tb:rgba(20,20,30,0.94);
}
:root.dark .inp option{background:var(--sf2)}

/* ── Base ────────────────────────────────────────────────────────────────── */
html,body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-feature-settings:"ss01","cv09";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
  line-height:1.5;
}

/* Selection */
::selection{background:var(--acm);color:var(--ac)}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* Reduced-motion: strip all transitions */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}