/* ============================================================
   DESIGN TOKENS v1.0 — CV YKW Business Suite
   FROZEN: do not edit colors without updating DESIGN_TOKENS.md
   ============================================================
   COLOR SEMANTICS (LOCKED):
     Indigo  → primary interactions (buttons, focus, selected, sent/in-progress status)
     Emerald → success state ONLY (paid, accepted, completed) + brand logo
     Orange  → warning (pending, partial, expiring)
     Red     → danger (overdue, rejected, destructive)
     Slate   → navigation, neutral text, dividers
     NO BLUE: removed to avoid semantic collision with indigo
   ============================================================ */

:root {
  /* ---- BACKGROUNDS ---- */
  --bg-app:        #f8fafc;
  --bg-card:       #ffffff;
  --bg-sidebar:    #0f172a;
  --bg-sidebar-2:  #1e293b;
  --bg-hover:      #f8fafc;
  --bg-active:     #f1f5f9;
  --bg-subtle:     #f8fafc;

  /* ---- PRIMARY (indigo) ---- */
  --primary:       #4f46e5;
  --primary-hover: #4338ca;
  --primary-active:#3730a3;
  --primary-light: #eef2ff;
  --primary-ring:  rgba(79, 70, 229, 0.16);
  --primary-soft:  #c7d2fe;
  --primary-text:  #3730a3;

  /* ---- BRAND (emerald — STRICT: only logo + success state) ---- */
  --brand:         #059669;
  --brand-hover:   #047857;
  --brand-light:   #d1fae5;
  --brand-soft:    #a7f3d0;

  /* ---- STATUS ---- */
  --success:       #059669;
  --success-bg:    #d1fae5;
  --success-text:  #065f46;  /* WCAG AA on success-bg */
  --warning:       #f97316;
  --warning-bg:    #ffedd5;
  --warning-text:  #9a3412;  /* WCAG AA */
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;
  --danger-text:   #991b1b;  /* WCAG AA */
  /* info removed — use --primary for "sent / in progress" instead */

  /* ---- NEUTRALS ---- */
  --ink:           #0f172a;
  --text:          #334155;
  --text-2:        #475569;
  --muted:         #64748b;
  --subtle:        #94a3b8;
  --faint:         #cbd5e1;
  --border:        rgba(226, 232, 240, 0.7);  /* slate-200/70 — Stripe softness */
  --border-strong: #cbd5e1;
  --divider:       #f1f5f9;

  /* ---- DOCUMENT PRESERVATION ---- */
  --doc-navy:      #1f3864;
  --doc-red:       #c00000;

  /* ---- TYPOGRAPHY ---- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', 'PingFang TC', '微軟正黑體', 'Noto Sans', sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-md:   13px;
  --text-base: 14px;
  --text-lg:   15px;        /* card titles — refined down */
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-kpi:  36px;        /* KPI numbers — bumped up from 32 */
  --text-4xl:  34px;

  --w-normal:   400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---- SPACING ---- */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;       /* card padding — refined down */
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- RADIUS ---- */
  --r-xs:   4px;  --r-sm:   6px;  --r-md:   8px;
  --r-lg:   12px; --r-xl:   16px; --r-2xl:  20px;
  --r-full: 9999px;

  /* ---- SHADOWS ---- */
  --shadow-xs:    0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-card:  0 1px 3px 0 rgba(15,23,42,0.04),
                  0 1px 2px -1px rgba(15,23,42,0.03);
  --shadow-hover: 0 4px 12px -2px rgba(15,23,42,0.08),
                  0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-popover: 0 10px 25px -5px rgba(15,23,42,0.10),
                    0 4px 6px -4px rgba(15,23,42,0.05);
  --shadow-drawer: -16px 0 48px -16px rgba(15,23,42,0.12),
                   -4px 0 16px -8px rgba(15,23,42,0.06);
  --shadow-modal:  0 25px 50px -12px rgba(15,23,42,0.20);

  /* ---- OVERLAY ---- */
  --overlay-soft:   rgba(15, 23, 42, 0.08);
  --overlay-strong: rgba(15, 23, 42, 0.40);

  /* ---- ANIMATION ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- LAYOUT ---- */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --drawer-w:            480px;
  --container-max:       1440px;
}

/* ---- SIDEBAR (Linear style: neutral slate, no semantic color) ---- */
.sidebar {
  --text:   #cbd5e1;
  --muted:  #94a3b8;
  --subtle: #64748b;
  --border: rgba(255,255,255,0.06);
  --bg-hover: #1e293b;
  --bg-active: rgba(255,255,255,0.05);
}

/* Global typography refinement */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}