/**
 * cc-tracker Design Tokens
 * Warm mango-forward palette with cool accent
 */

:root {
  /* === Colors: Primary & Accent === */
  --color-primary: #d97706;        /* Amber 600 - warm mango */
  --color-primary-dark: #b45309;   /* Amber 700 */
  --color-primary-light: #fbbf24;  /* Amber 400 */
  --color-primary-tint: #fef3c7;   /* Amber 100 - tint bg */

  --color-accent: #0d9488;         /* Teal 600 */
  --color-accent-dark: #0f766e;    /* Teal 700 */
  --color-accent-light: #5eead4;   /* Teal 300 */
  --color-accent-tint: #ccfbf1;    /* Teal 100 */

  --color-violet: #7c3aed;         /* Violet 600 */
  --color-violet-tint: #ede9fe;    /* Violet 100 */
  --color-rose: #e11d48;           /* Rose 600 */
  --color-rose-tint: #ffe4e6;      /* Rose 100 */
  --color-emerald: #059669;        /* Emerald 600 */
  --color-emerald-tint: #d1fae5;   /* Emerald 100 */
  --color-sky: #0284c7;            /* Sky 600 */
  --color-sky-tint: #e0f2fe;       /* Sky 100 */

  /* === Colors: Neutrals === */
  --color-bg: #fafaf9;             /* Stone 50 - page background, slight warmth */
  --color-panel: #ffffff;          /* Card/panel background */
  --color-fg: #1c1917;             /* Stone 900 */
  --color-fg-soft: #44403c;        /* Stone 700 */
  --color-muted: #78716c;          /* Stone 500 */
  --color-border: #e7e5e4;         /* Stone 200 */
  --color-border-strong: #d6d3d1;  /* Stone 300 */
  --color-surface: #f5f5f4;        /* Stone 100 */
  --color-surface-hover: #e7e5e4;  /* Stone 200 */

  /* === Colors: Semantic === */
  --color-success: #059669;
  --color-success-bg: #d1fae5;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-error: #dc2626;
  --color-error-bg: #fee2e2;
  --color-info: #2563eb;
  --color-info-bg: #dbeafe;

  /* === Gradients === */
  --gradient-primary: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --gradient-accent: linear-gradient(135deg, #5eead4 0%, #0d9488 100%);
  --gradient-header: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);

  /* === Spacing === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* === Border Radii === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --shadow-ring: 0 0 0 3px rgb(217 119 6 / 0.15);

  /* === Typography === */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* === Z-Index === */
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 2000;

  /* === Transitions === */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
}