/* FlowTask theme tokens. Dark/light via [data-theme]. WCAG AA on both. */
:root {
  /* Brand */
  --accent:        #FF6B00;
  --accent-hover:  #E85D00;
  --accent-active: #CC5200;
  --accent-weak:   #FFE4D1;          /* tinted bg (light) */
  --accent-muted:  #FFF6F0;          /* very subtle bg (light hover) */
  --on-accent:     #FFFFFF;

  /* Surfaces */
  --bg:            #F6F8FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;          /* subtle panel */
  --surface-3:     #E2E8F0;          /* stronger panel / chip */
  --surface-hover: #F8FAFC;

  /* Text */
  --text:          #0F172A;
  --text-muted:    #475569;
  --text-subtle:   #94A3B8;          /* disabled / hint */

  /* Lines */
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* Semantic */
  --focus:         #2563EB;
  --focus-ring:    rgba(37, 99, 235, .35);
  --danger:        #DC2626;
  --danger-weak:   #FEE2E2;
  --warn:          #D97706;
  --warn-weak:     #FEF3C7;
  --success:       #059669;
  --success-weak:  #D1FAE5;
  --info:          #0284C7;
  --info-weak:     #DBEAFE;

  /* Shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .06);

  /* Spacing scale — used across UI for consistency. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Motion */
  --motion-fast: 120ms cubic-bezier(.2, 0, .2, 1);
  --motion:      200ms cubic-bezier(.2, 0, .2, 1);
  --motion-slow: 320ms cubic-bezier(.2, 0, .2, 1);

  /* UI chrome */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #0B1220;
  --surface:       #121B2E;
  --surface-2:     #17223B;
  --surface-3:     #22304E;
  --surface-hover: #1A2540;

  --text:          #E7EDF7;
  --text-muted:    #9AAAC4;
  --text-subtle:   #64748B;

  --border:        #24324F;
  --border-strong: #334360;

  --accent-weak:   #3B1F0B;
  --accent-muted:  #24160C;

  --danger-weak:   #3A0F0F;
  --warn-weak:     #3A2908;
  --success-weak:  #0A2F24;
  --info-weak:     #0A2443;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .65);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0B1220;
    --surface:    #121B2E;
    --surface-2:  #17223B;
    --surface-3:  #22304E;
    --text:       #E7EDF7;
    --text-muted: #9AAAC4;
    --text-subtle:#64748B;
    --border:     #24324F;
    --border-strong: #334360;
    --accent-weak:#3B1F0B;
    --accent-muted:#24160C;
    color-scheme: dark;
  }
}

/* Respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion: 0ms; --motion-slow: 0ms; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}