/*
  Design tokens — Task Tracker
  Shared CSS custom properties (colors, spacing, radius, shadow, typography)
  reused by every page. Do not hardcode raw color/spacing values in page CSS —
  reference these tokens instead.
*/
:root {
  /* Neutral scale (cool gray) */
  --gray-0: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f7f8fa;
  --gray-100: #eef0f3;
  --gray-200: #e2e5e9;
  --gray-300: #cbd0d8;
  --gray-400: #a3aab5;
  --gray-500: #7c8493;
  --gray-600: #5c636f;
  --gray-700: #40454e;
  --gray-800: #262a30;
  --gray-900: #16181c;

  /* Accent — single indigo/violet accent (Linear-inspired) */
  --accent-50: #f0f0fe;
  --accent-100: #e2e1fc;
  --accent-200: #c6c4fa;
  --accent-400: #8b85f0;
  --accent-500: #6e63e6;
  --accent-600: #5b52d9;
  --accent-700: #473ec2;

  /* Semantic */
  --success-50: #e9f9f0;
  --success-500: #1f9254;
  --danger-50: #fdecec;
  --danger-500: #d1373f;
  --danger-600: #b52c33;
  --warning-50: #fdf3e3;
  --warning-600: #b8790a;

  /* Stage pipeline colors (lighter pastel tones) */
  --stage-concept-bg: #e8f4fd;
  --stage-concept-text: #1a6fa3;
  --stage-sketch-bg: #eee8fb;
  --stage-sketch-text: #6139a8;
  --stage-modeling-bg: #e4f5f0;
  --stage-modeling-text: #177a5d;
  --stage-texturing-bg: #fef2e4;
  --stage-texturing-text: #a6600a;
  --stage-rendering-bg: #fde8ec;
  --stage-rendering-text: #b02d4a;
  --stage-review-bg: #fdf5e3;
  --stage-review-text: #8a6300;
  --stage-revision-bg: #f0e8fd;
  --stage-revision-text: #7434b8;
  --stage-final-bg: #e6f7ed;
  --stage-final-text: #1a7a3f;

  /* Surface / text roles */
  --bg-canvas: var(--gray-25);
  --bg-surface: var(--gray-0);
  --bg-surface-hover: var(--gray-50);
  --bg-muted: var(--gray-50);
  --bg-inverse: var(--gray-900);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--accent-500);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-on-accent: #ffffff;
  --text-on-inverse: var(--gray-50);

  --accent: var(--accent-600);
  --accent-hover: var(--accent-700);
  --accent-subtle: var(--accent-50);
  --accent-subtle-strong: var(--accent-100);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Semantic spacing aliases */
  --space-xs: var(--space-1);   /* 4px */
  --space-sm: var(--space-2);   /* 8px */
  --space-md: var(--space-4);   /* 16px */
  --space-lg: var(--space-6);   /* 24px */
  --space-xl: var(--space-8);   /* 32px */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --shadow-modal: 0 16px 48px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.08);

  /* Modal-specific tokens */
  --radius-modal: var(--radius-lg);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

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

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}