/**
 * variables.css — JustTasks Design Tokens
 *
 * ALL colour, spacing, shadow, radius, and transition values must come
 * from here. Never hard-code these values anywhere else.
 */

:root {
  /* ── Brand ───────────────────────────────────────────────── */
  --color-primary:          #0052cc;
  --color-primary-hover:    #0065ff;
  --color-primary-active:   #0747a6;
  --color-accent:           #00c7e6;

  /* ── UI Surfaces ─────────────────────────────────────────── */
  --color-bg:               #f4f5f7;
  --color-surface:          #ffffff;
  --color-surface-hover:    #ebecf0;
  --color-surface-raised:   #f8f9fa;
  --color-border:           #dfe1e6;
  --color-border-focus:     #0052cc;

  /* ── Status / Priority ───────────────────────────────────── */
  --color-priority-low:        #36b37e;
  --color-priority-low-bg:     #e3fcef;
  --color-priority-medium:     #ff8b00;
  --color-priority-medium-bg:  #fffae6;
  --color-priority-high:       #de350b;
  --color-priority-high-bg:    #ffebe6;

  /* ── Semantic ────────────────────────────────────────────── */
  --color-success:          #36b37e;
  --color-warning:          #ff8b00;
  --color-danger:           #de350b;
  --color-info:             #0052cc;

  /* ── Text ────────────────────────────────────────────────── */
  --color-text-primary:     #172b4d;
  --color-text-secondary:   #5e6c84;
  --color-text-muted:       #97a0af;
  --color-text-inverse:     #ffffff;
  --color-text-link:        #0052cc;

  /* ── Spacing Scale ───────────────────────────────────────── */
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;

  /* ── Border Radii ────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(9, 30, 66, 0.12),  0 0 0 1px rgba(9, 30, 66, 0.08);
  --shadow-md:  0 4px 8px rgba(9, 30, 66, 0.15),  0 0 1px rgba(9, 30, 66, 0.10);
  --shadow-lg:  0 8px 24px rgba(9, 30, 66, 0.20), 0 2px 4px rgba(9, 30, 66, 0.10);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --navbar-height:         56px;
  --list-col-width:        272px;
  --list-col-gap:          var(--space-sm);
  --card-priority-bar-w:   4px;
}