/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit;border:none;outline:none}
ul{list-style:none}

/* ===== DESIGN TOKENS — TEAL BLUE ===== */
:root{
  /* Primary Teal Blue */
  --teal-50:#e6f7f7;
  --teal-100:#b3e8e8;
  --teal-200:#80d9d9;
  --teal-300:#4dcaca;
  --teal-400:#26bfbf;
  --teal-500:#009b9b;
  --teal-600:#008585;
  --teal-700:#006f6f;
  --teal-800:#005959;
  --teal-900:#003d3d;

  /* Accent */
  --accent-warm:#ff6b6b;

  /* Neutrals */
  --gray-50:#f8fafa;
  --gray-100:#f0f4f4;
  --gray-200:#e2e8e8;
  --gray-300:#c4d0d0;
  --gray-400:#94a3a3;
  --gray-500:#677878;
  --gray-600:#4a5858;
  --gray-700:#374040;
  --gray-800:#1f2a2a;
  --gray-900:#0f1616;

  /* Semantic */
  --primary:var(--teal-500);
  --primary-light:var(--teal-400);
  --primary-dark:var(--teal-700);
  --primary-bg:var(--teal-50);

  /* Surfaces */
  --bg:#ffffff;
  --bg-alt:var(--gray-50);
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --border:var(--gray-200);

  /* Text */
  --text:var(--gray-900);
  --text-secondary:var(--gray-600);
  --text-muted:var(--gray-400);
  --text-on-primary:#ffffff;

  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,59,59,.06);
  --shadow-md:0 4px 12px rgba(0,59,59,.08);
  --shadow-lg:0 8px 30px rgba(0,59,59,.12);
  --shadow-xl:0 16px 50px rgba(0,59,59,.16);

  /* Radii */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;

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

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:280ms;
}

/* ===== DARK MODE ===== */
[data-theme="dark"]{
  --bg:#0c1a1a;
  --bg-alt:#112222;
  --surface:#162c2c;
  --surface-raised:#1a3333;
  --border:#1f3d3d;

  --text:#e6f0f0;
  --text-secondary:#94b8b8;
  --text-muted:#5a7878;

  --primary:var(--teal-400);
  --primary-light:var(--teal-300);
  --primary-dark:var(--teal-600);
  --primary-bg:rgba(0,155,155,.1);

  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 8px 30px rgba(0,0,0,.4);
  --shadow-xl:0 16px 50px rgba(0,0,0,.5);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--teal-300);border-radius:var(--radius-full)}

/* ===== SELECTION ===== */
::selection{background:var(--teal-200);color:var(--teal-900)}
[data-theme="dark"] ::selection{background:var(--teal-700);color:var(--teal-50)}