/**
 * Do not edit directly
 * Generated on Sun, 20 Oct 2024 18:44:47 GMT
 */

:root {
/* ==========================================================================
     COLOR TOKENS - CORE PALETTE
     ========================================================================== */
 /* =========================
     PRIMARY COLORS (Almost Black at 500)
  ========================= */
  --color-primary-0: #f5f5f5;    /* very light gray for backgrounds */
  --color-primary-50: #e0e0e0;
  --color-primary-100: #c8c8c8;
  --color-primary-200: #aaaaaa;
  --color-primary-300: #888888;
  --color-primary-400: #555555;
  --color-primary-500: #111111;   /* almost black, main emphasis */
  --color-primary-600: #0e0e0e;
  --color-primary-700: #0a0a0a;
  --color-primary-800: #080808;
  --color-primary-900: #050505;
  --color-primary-950: #000000;   /* true black */

  /* =========================
   GRAYSCALE SECONDARY SCALE
========================= */
  --color-secondary-0: #ffffff; /* pure white */
  --color-secondary-50: #f9f9f9;
  --color-secondary-100: #f2f2f2;
  --color-secondary-200: #e6e6e6;
  --color-secondary-300: #d9d9d9;
  --color-secondary-400: #cccccc;
  --color-secondary-500: #b3b3b3;
  --color-secondary-600: #999999;
  --color-secondary-700: #7f7f7f;
  --color-secondary-800: #666666;
  --color-secondary-900: #4d4d4d;
  --color-secondary-950: #333333; /* almost black */

  /* Semantic Colors - Success */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e; /* Base */
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Semantic Colors - Warning */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b; /* Base */
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Semantic Colors - Error */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444; /* Base */
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  /* Semantic Colors - Info */
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6; /* Base */
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;

  /* Neutral/Greyscale - Light Mode */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  --margin-xsm4: 1px;
  --margin-xsm3: 2px;
  --margin-xsm2: 4px;
  --margin-xsm: 8px;
  --margin-sm: 12px;
  --margin-base: 16px;
  --margin-md: 24px;
  --margin-lg: 32px;
  --margin-xl: 48px;
  --margin-xl2: 64px;
  --margin-xl3: 96px;
  --margin-xl4: 128px;
  --margin-xl5: 192px;
  --margin-xl6: 256px;
  --margin-xl7: 384px;
  --margin-xl8: 512px;
  --margin-xl9: 640px;
  --margin-xl10: 768px;

  /* Border Radius */
  --radii-none: 0;
  --radii-sm: 1.25px;
  --radii-base: 2.4px;
  --radii-md: 3.75px;
  --radii-lg: 5px;
  --radii-xl: 7.5px;
  --radii-xxl: 10px;
  --radii-xxxl: 15px;
  --radii-full: 9999px;

  /* Font size */
  --font-xsm: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-xl2: 30px;
  --font-xl3: 36px;
  --font-xl4: 48px;
  --font-xl5: 60px;
  --font-xl6: 72px;

  /* Aspect Ratios */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-photo: 4 / 3;
  --aspect-portrait: 3 / 4;
  --aspect-cinema: 21 / 9;
  --aspect-golden: 1.618 / 1;
}