/* Design tokens — SoarTask Product Design System
   Blue-primary, flat surfaces, minimal shadows, Linear/ClickUp-inspired. */

:root{
      /* ── Text ── */
      --ink:#0F172A;--ink-2:#1E293B;--muted:#475569;--faint:#94A3B8;
      /* ── Background ── */
      --canvas:#F8FAFC;--canvas-2:#F1F5F9;--panel:#FFFFFF;
      /* ── Border ── */
      --line:#E2E8F0;--line-2:#F1F5F9;--line-hover:#CBD5E1;
      /* ── Primary (Blue) ── */
      --blue:#2563EB;--blue-2:#1D4ED8;--blue-weak:#EFF6FF;--blue-soft:#DBEAFE;
      /* ── Status ── */
      --green:#16A34A;--green-weak:#F0FDF4;--green-soft:#DCFCE7;
      --amber:#D97706;--amber-weak:#FFFBEB;--amber-soft:#FEF3C7;
      --red:#DC2626;--red-weak:#FEF2F2;--red-soft:#FEE2E2;
      --purple:#7C3AED;--purple-weak:#F5F3FF;--purple-soft:#EDE9FE;
      --teal:#0D9488;--teal-weak:#F0FDFA;--teal-soft:#CCFBF1;
      /* ── Shadows (very light) ── */
      --shadow-xs:0 1px 2px rgba(15,23,42,.04);
      --shadow-sm:0 1px 3px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.03);
      --shadow-md:0 4px 12px -2px rgba(15,23,42,.06),0 2px 6px -2px rgba(15,23,42,.04);
      --shadow-lg:0 12px 32px -8px rgba(15,23,42,.08),0 4px 12px -4px rgba(15,23,42,.04);
      --ring:0 0 0 3px rgba(37,99,235,.12);
      /* ── Layout ── */
      --rail:0px;--sidebar:252px;--top:56px;
      /* ── Brand (no gradient — flat blue) ── */
      --grad-brand:#2563EB;
      --grad-mesh:none;
      font:14px/1.55 Inter,"Noto Sans Thai","Segoe UI",sans-serif;
      color:var(--ink);background:var(--canvas);
      -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
      font-feature-settings:"cv02","cv03","cv04","cv11";
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--canvas);background-image:none}
    button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
    ::selection{background:rgba(37,99,235,.12)}
    *{scrollbar-width:thin;scrollbar-color:var(--line-hover) transparent}
    *::-webkit-scrollbar{width:8px;height:8px}
    *::-webkit-scrollbar-thumb{background:var(--line-hover);border-radius:8px;border:2px solid transparent;background-clip:content-box}
    *::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
    .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
    .icon-svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
    .icon-svg.sm{width:15px;height:15px;stroke-width:1.75}
    .icon-svg.lg{width:20px;height:20px}
    .icon-svg.xl{width:24px;height:24px;stroke-width:1.5}

    .app{min-height:100vh}
    @media(min-width:901px){.main{margin-left:var(--sidebar)}.main.sidebar-collapsed{margin-left:64px}}
    @media(min-width:901px) and (max-width:1100px){.main{margin-left:220px}.main.sidebar-collapsed{margin-left:64px}}
    @media(max-width:900px){.main{margin-left:0}}