/* =====================================================================
   variables.css — Design tokens (Light theme only)
   Single source of truth for colours, spacing, radii, shadows, motion.
   ===================================================================== */

:root {
  /* ---- Brand palette ---- */
  --color-primary:        #337AB7;
  --color-primary-hover:  #286090;
  --color-primary-soft:   rgba(51, 122, 183, 0.10);
  --color-primary-ring:   rgba(51, 122, 183, 0.35);

  --color-white:          #FFFFFF;
  --color-black:          #000000;

  --color-bg:             #F5F7FA;
  --color-card:           #FFFFFF;
  --color-border:         #E6EAF0;
  --color-border-strong:  #D4DAE4;

  /* ---- Status ---- */
  --color-success:        #28A745;
  --color-warning:        #FFC107;
  --color-danger:         #DC3545;
  --color-info:           #17A2B8;
  --color-muted:          #6C757D;

  --color-success-soft:   rgba(40, 167, 69, 0.12);
  --color-warning-soft:   rgba(255, 193, 7, 0.16);
  --color-danger-soft:    rgba(220, 53, 69, 0.12);
  --color-info-soft:      rgba(23, 162, 184, 0.12);
  --color-muted-soft:     rgba(108, 117, 125, 0.12);

  /* ---- Text ---- */
  --text-strong:          #1B2733;
  --text-default:         #2D3A47;
  --text-muted:           #6C757D;
  --text-faint:           #9AA5B1;
  --text-on-primary:      #FFFFFF;

  /* ---- Category accent colours (for chips & column headers) ---- */
  --cat-production:       #DC3545;
  --cat-staging:          #FD7E14;
  --cat-release:          #6F42C1;
  --cat-develop:          #337AB7;
  --cat-feature:          #28A745;
  --cat-bugfix:           #E83E8C;
  --cat-hotfix:           #FF5722;
  --cat-review:           #17A2B8;
  --cat-archived:         #6C757D;
  --cat-others:           #8895A7;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 31, 51, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 31, 51, 0.07), 0 1px 2px rgba(16, 31, 51, 0.04);
  --shadow:    0 4px 12px rgba(16, 31, 51, 0.08), 0 1px 3px rgba(16, 31, 51, 0.05);
  --shadow-md: 0 10px 24px rgba(16, 31, 51, 0.10), 0 3px 8px rgba(16, 31, 51, 0.06);
  --shadow-lg: 0 18px 48px rgba(16, 31, 51, 0.16), 0 6px 16px rgba(16, 31, 51, 0.08);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ---- Typography ---- */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Consolas", "Roboto Mono", monospace;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-base:14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* ---- Layout metrics ---- */
  --header-h: 68px;
  --column-w: 340px;
  --z-header: 100;
  --z-sticky: 90;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-context: 1500;
}