/* Clarity design tokens — bright/airy, indigo accent, soft shadows.
   Light is the default (:root). Dark overrides via [data-theme="dark"]. */

:root {
  /* ---- Brand / accent (indigo) ---- */
  --color-accent:        #4f46e5;
  --color-accent-hover:  #4338ca;
  --color-accent-active: #3730a3;
  --color-accent-soft:   #eef2ff;
  --color-accent-contrast:#ffffff;

  /* ---- Semantic ---- */
  --color-success:       #16a34a;
  --color-success-soft:  #dcfce7;
  --color-warning:       #d97706;
  --color-warning-soft:  #fef3c7;
  --color-danger:        #dc2626;
  --color-danger-soft:   #fee2e2;
  --color-info:          #0284c7;
  --color-info-soft:     #e0f2fe;

  /* ---- Surfaces & text (light) ---- */
  --color-bg:            #f6f7fb;  /* app background — airy off-white */
  --color-surface:       #ffffff;  /* cards, panels */
  --color-surface-2:     #f9fafb;  /* nested surfaces, table header */
  --color-control:       #eceef3;  /* form controls & secondary buttons — distinct from surface so they read as controls */
  --color-control-hover: #e2e6ee;
  --color-sidebar:       #ffffff;
  --color-topbar:        #ffffff;
  --color-border:        #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-text:          #111827;  /* primary text */
  --color-text-muted:    #6b7280;  /* secondary text */
  --color-text-subtle:   #9ca3af;  /* tertiary / placeholders */
  --color-overlay:       rgba(17, 24, 39, 0.45);
  --color-focus-ring:    rgba(79, 70, 229, 0.35);

  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

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

  /* ---- Shadows (soft) ---- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.05);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12), 0 4px 8px rgba(17, 24, 39, 0.06);

  /* ---- Typography ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Layout dims ---- */
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --content-max:   1240px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
}

/* ---- Dark theme overrides ---- */
[data-theme="dark"] {
  --color-accent:        #818cf8;
  --color-accent-hover:  #6366f1;
  --color-accent-active: #4f46e5;
  --color-accent-soft:   #1e1b4b;
  --color-accent-contrast:#0b1020;

  --color-success:       #22c55e;
  --color-success-soft:  #052e16;
  --color-warning:       #f59e0b;
  --color-warning-soft:  #3a2a06;
  --color-danger:        #f87171;
  --color-danger-soft:   #3a0d0d;
  --color-info:          #38bdf8;
  --color-info-soft:     #042b3a;

  --color-bg:            #0b1020;
  --color-surface:       #131a2e;
  --color-surface-2:     #1a2236;
  --color-control:       #1e2740;
  --color-control-hover: #27314f;
  --color-sidebar:       #0f1526;
  --color-topbar:        #0f1526;
  --color-border:        #283149;
  --color-border-strong: #3a4566;
  --color-text:          #e6e9f2;
  --color-text-muted:    #9aa4bf;
  --color-text-subtle:   #6b7593;
  --color-overlay:       rgba(0, 0, 0, 0.6);
  --color-focus-ring:    rgba(129, 140, 248, 0.45);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}