/* Nexus Design System — Design Tokens for myDartCompanion */

:root {
  /* Fonts */
  --font-display: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Spacing Scale (4px Base Grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 15px rgba(230, 34, 55, 0.35);
  --shadow-glow-yellow: 0 0 15px rgba(252, 163, 17, 0.35);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Colors - Dark Mode (Default) - Warm Charcoal & Black */
  --color-bg-h: 220;
  --color-bg-s: 12%;
  --color-bg-l: 8%;
  --color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l)); /* #111315 */

  --color-surface-h: 220;
  --color-surface-s: 10%;
  --color-surface-l: 14%;
  --color-surface: hsl(var(--color-surface-h), var(--color-surface-s), var(--color-surface-l)); /* #1f2124 */

  --color-surface-hover: hsl(220, 10%, 18%); /* #282b2e */
  --color-surface-active: hsl(220, 10%, 22%);
  
  --color-border: hsl(220, 10%, 20%);
  --color-border-focus: hsl(354, 85%, 52%);

  /* Primary Brand Accent (Sporty Crimson Red) */
  --color-primary-h: 354;
  --color-primary-s: 85%;
  --color-primary-l: 52%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); /* #e62237 */
  --color-primary-hover: hsl(354, 90%, 58%);
  --color-primary-active: hsl(354, 85%, 45%);
  --color-primary-rgb: 230, 34, 55;

  /* Secondary Accent (Warm Amber Yellow) */
  --color-yellow-h: 45;
  --color-yellow-s: 95%;
  --color-yellow-l: 52%;
  --color-yellow: hsl(var(--color-yellow-h), var(--color-yellow-s), var(--color-yellow-l)); /* #fca311 */
  --color-yellow-hover: hsl(45, 100%, 58%);
  --color-yellow-bg: rgba(252, 163, 17, 0.15);

  /* Typography Colors */
  --color-text-main: hsl(220, 15%, 94%); /* #eef1f3 */
  --color-text-muted: hsl(220, 10%, 65%); /* #9fa6ad */
  --color-text-inverse: hsl(220, 30%, 12%);

  /* Accent Colors */
  --color-danger: hsl(354, 85%, 52%);
  --color-danger-bg: rgba(230, 34, 55, 0.15);
  --color-success: hsl(142, 70%, 45%);
  --color-success-bg: rgba(36, 178, 89, 0.15);
}

/* Light Mode Overrides */
html.light {
  --color-bg-h: 220;
  --color-bg-s: 12%;
  --color-bg-l: 96%;
  --color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l)); /* #f3f4f6 */

  --color-surface-h: 0;
  --color-surface-s: 0%;
  --color-surface-l: 100%;
  --color-surface: hsl(var(--color-surface-h), var(--color-surface-s), var(--color-surface-l)); /* #ffffff */

  --color-surface-hover: hsl(220, 10%, 92%);
  --color-surface-active: hsl(220, 10%, 88%);

  --color-border: hsl(220, 12%, 90%);
  --color-border-focus: hsl(354, 80%, 46%);

  --color-primary-h: 354;
  --color-primary-s: 80%;
  --color-primary-l: 46%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)); /* #cf1d30 */
  --color-primary-hover: hsl(354, 85%, 40%);
  --color-primary-active: hsl(354, 80%, 34%);
  --color-primary-rgb: 207, 29, 48;

  --color-yellow-h: 42;
  --color-yellow-s: 90%;
  --color-yellow-l: 46%;
  --color-yellow: hsl(var(--color-yellow-h), var(--color-yellow-s), var(--color-yellow-l)); /* #d98200 */
  --color-yellow-hover: hsl(42, 90%, 40%);
  --color-yellow-bg: rgba(217, 130, 0, 0.12);

  --color-text-main: hsl(220, 25%, 15%); /* #1c2126 */
  --color-text-muted: hsl(220, 12%, 50%); /* #707a85 */
  --color-text-inverse: hsl(220, 15%, 94%);
}