/* Generated by cssmark - https://github.com/artmsilva/cssmark */

:root {
  /* color.background */
  --color-bg: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);

  /* color.brand */
  /* @deprecated */ --color-accent: #6366f1;
  --color-primary: var(--color-blue-500);

  /* color.primitives */
  --color-blue-400: #66aaff;
  --color-blue-500: #0055ff;
  --color-gray-200: #e9ecef;
  --color-gray-50: #f8f9fa;
  --color-gray-500: #6c757d;
  --color-navy-800: #2d2d44;
  --color-navy-900: #1a1a2e;
  --color-red-500: #dc3545;
  --color-white: #ffffff;
  --color-yellow-500: #ffc107;

  /* color.semantic */
  --color-border: var(--color-gray-200);
  --color-danger: var(--color-red-500);
  --color-warning: var(--color-yellow-500);

  /* color.text */
  --color-text: var(--color-navy-900);
  --color-text-muted: var(--color-gray-500);

  /* effects */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);

  /* layout */
  --card-min-width: 320px;
  --content-max-width: 1200px;
  --sidebar-width: 280px;
  --swatch-size: 24px;

  /* radius */
  --radius-full: 999px;
  --radius-lg: 8px;
  --radius-md: 4px;
  --radius-sm: 2px;

  /* spacing */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --space-9: 3rem;

  /* typography.family */
  --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* typography.lineHeight */
  --line-height-base: 1.6;

  /* typography.size */
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;
  --font-size-xl: 1.5rem;
  --font-size-xs: 0.75rem;
}

:root[data-color-mode='dark'] {
  --color-bg: var(--color-navy-900);
  --color-bg-secondary: var(--color-navy-800);
  --color-border: var(--color-gray-500);
  --color-primary: var(--color-blue-400);
  --color-text: var(--color-gray-50);
}