/* Design tokens — every color/space/font value lives here as --app-* vars.
   Feature CSS references these; never hard-code hex outside this file. */
:root {
  /* Brand palette — calm teal primary on warm neutrals. */
  --app-primary:        #0f766e;
  --app-primary-hover:  #0d655e;
  --app-primary-soft:   #e6f3f1;
  --app-primary-fg:     #ffffff;

  --app-accent:         #b45309;
  --app-accent-soft:    #fdf1e3;

  /* Neutrals */
  --app-bg:             #f4f5f7;
  --app-surface:        #ffffff;
  --app-surface-2:      #fafbfc;
  --app-border:         #e2e5ea;
  --app-border-strong:  #cbd1da;

  /* Text */
  --app-text:           #1b2230;
  --app-text-muted:     #5b6472;
  --app-text-faint:     #8b94a3;

  /* Status */
  --app-danger:         #b91c1c;
  --app-danger-soft:    #fdecec;
  --app-success:        #15803d;
  --app-success-soft:   #e9f6ee;
  --app-warning:        #a16207;
  --app-warning-soft:   #fdf6e3;

  /* Sidebar (dark) */
  --app-sidebar-bg:     #14202e;
  --app-sidebar-fg:     #c4ccd8;
  --app-sidebar-fg-dim: #7f8a99;
  --app-sidebar-active-bg: #1f3142;
  --app-sidebar-active-fg: #ffffff;

  /* Spacing scale */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 24px;
  --app-space-6: 32px;
  --app-space-7: 48px;

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

  /* Typography */
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
              Arial, sans-serif;
  --app-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --app-fs-xs: 12px;
  --app-fs-sm: 13px;
  --app-fs-md: 14px;
  --app-fs-lg: 16px;
  --app-fs-xl: 20px;
  --app-fs-2xl: 26px;

  /* Elevation */
  --app-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.06);
  --app-shadow:    0 2px 8px rgba(20, 32, 46, 0.08);
  --app-shadow-lg: 0 10px 30px rgba(20, 32, 46, 0.14);

  /* Layout */
  --app-sidebar-w: 248px;
  --app-topbar-h: 56px;
  --app-content-max: 1080px;
}