/* ==========================================================
   Design tokens — the single source of truth for the visual language.
   Used by the application (main.css) and the installer (install.css).

   Theme is set on <html data-theme="light|dark"> before first paint.
   Only colour and shadow values differ between themes.

   Breakpoints (media queries cannot read custom properties, so these are
   the values to use by hand):
     sm  480px   large phones
     md  768px   tablets
     lg  1024px  laptops
     xl  1200px  desktops
   ========================================================== */

:root{
  /* Typography */
  --font-sans:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans Bengali',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-md:.9375rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:1.75rem;
  --text-3xl:clamp(2.125rem,1.45rem + 2.9vw,3.25rem);
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --leading-tight:1.2;
  --leading-snug:1.35;
  --leading-normal:1.55;

  /* Spacing scale */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;

  /* Radius */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;

  /* Control heights (44px is the minimum comfortable touch target) */
  --control-sm:36px;
  --control-md:44px;
  --control-lg:52px;

  /* Layout */
  --container:1120px;
  --container-narrow:560px;
  --gutter:var(--space-4);
  --nav-height:64px;

  /* Motion */
  --ease:cubic-bezier(.22,.8,.3,1);
  --duration-fast:.15s;
  --duration:.22s;

  /* Light theme colours (default) */
  --bg:#f4f5f2;
  --surface:#ffffff;
  --surface-sunken:#f0f1ed;
  --surface-hover:#e8eae4;
  --border:#dee1da;
  --border-strong:#c4c9bf;

  --text:#20262a;
  --text-secondary:#4a5358;
  --text-muted:#626b70;

  --primary:#1f6f64;
  --primary-hover:#195c53;
  --primary-soft:#e2f0ec;
  --primary-text:#1a6258;
  --on-primary:#ffffff;
  --focus-ring:rgba(31,111,100,.32);

  --success:#2b7a57;
  --success-soft:#e3f2ea;
  --warning:#8a5f10;
  --warning-soft:#faf0db;
  --danger:#b03f36;
  --danger-soft:#fae8e5;
  --info:#2c6a99;
  --info-soft:#e3eef6;

  --plan-basic:#2b7a57;
  --plan-standard:#2c6a99;
  --plan-premium:#8a5f10;

  --chart-bar:#7fb5a9;
  --chart-bar-active:#1f6f64;
  --chart-highlight:rgba(31,111,100,.08);

  --backdrop:rgba(20,26,26,.45);
  --close-filter:none;
  --select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a5358' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  --shadow-sm:0 1px 2px rgba(24,32,30,.05);
  --shadow-md:0 6px 20px rgba(24,32,30,.08);
  --shadow-lg:0 16px 40px rgba(24,32,30,.14);

  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#15191c;
  --surface:#1c2125;
  --surface-sunken:#171b1f;
  --surface-hover:#262c31;
  --border:#2c3338;
  --border-strong:#3e474d;

  --text:#e6e9e7;
  --text-secondary:#b4bcbd;
  --text-muted:#929c9f;

  --primary:#6cbfae;
  --primary-hover:#84cdbe;
  --primary-soft:#1f3330;
  --primary-text:#84cdbe;
  --on-primary:#10201d;
  --focus-ring:rgba(108,191,174,.35);

  --success:#6fc79c;
  --success-soft:#1c3229;
  --warning:#e1b765;
  --warning-soft:#33291a;
  --danger:#ec8f85;
  --danger-soft:#3a2321;
  --info:#84b8df;
  --info-soft:#1c2e3d;

  --plan-basic:#6fc79c;
  --plan-standard:#84b8df;
  --plan-premium:#e1b765;

  --chart-bar:#4d8a7e;
  --chart-bar-active:#84cdbe;
  --chart-highlight:rgba(132,205,190,.09);

  --backdrop:rgba(5,8,10,.62);
  --close-filter:invert(1) grayscale(100%) brightness(1.6);
  --select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4bcbd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 6px 20px rgba(0,0,0,.32);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);

  color-scheme:dark;
}

@media (min-width:768px){
  :root{ --gutter:var(--space-6); }
}