/**
 * Design Tokens
 * Auto-generated from Figma design tokens
 * DO NOT EDIT MANUALLY - Run 'node scripts/frontend/convertTokens.js' to regenerate
 */

/* ============================================
   Quarkie Mode (Default)
   ============================================ */
:root {
  --main-gray-solid-1: #fcfcfc;
  --main-gray-solid-2: #f9f9f9;
  --main-gray-solid-3: #e0e0e0;
  --main-gray-solid-4: #cecece;
  --main-gray-solid-5: #bbbbbb;
  --main-gray-solid-6: #8d8d8d;
  --main-gray-solid-7: #646464;
  --main-gray-solid-8: #202020;
  --main-gray-solid-9: #151515;
  --main-gray-solid-10: #040404;
  --main-gray-alpha-0: rgba(0, 0, 0, 0);
  --main-gray-alpha-1: rgba(0, 0, 0, 0.03);
  --main-gray-alpha-2: rgba(0, 0, 0, 0.06);
  --main-gray-alpha-3: rgba(0, 0, 0, 0.09);
  --main-gray-alpha-4: rgba(0, 0, 0, 0.12);
  --main-gray-alpha-5: rgba(0, 0, 0, 0.15);
  --main-gray-alpha-6: rgba(0, 0, 0, 0.2);
  --main-gray-alpha-7: rgba(0, 0, 0, 0.3);
  --main-gray-alpha-8: rgba(0, 0, 0, 0.5);
  --main-gray-alpha-9: rgba(0, 0, 0, 0.7);
  --main-gray-alpha-10: rgba(0, 0, 0, 0.85);
  --main-accent-brand-1: #040404;
  --main-accent-brand-2: #1e1e1e;
  --main-accent-brand-3: #323232;
  --main-accent-red-1: #feebec;
  --main-accent-red-2: #ffdbdc;
  --main-accent-red-3: #ffcdce;
  --main-accent-red-4: #e5484d;
  --main-accent-red-5: #dc3e42;
  --main-accent-red-6: #ce2c31;
  --main-accent-red-7: #641723;
  --main-accent-green-1: #e8fadd;
  --main-accent-green-2: #dbf5ca;
  --main-accent-green-3: #d0eabf;
  --main-accent-green-4: #abe982;
  --main-accent-green-5: #97d56e;
  --main-accent-green-6: #647b55;
  --main-accent-green-7: #34402c;
  --main-accent-blue-1: #eaf2ff;
  --main-accent-blue-2: #daeaff;
  --main-accent-blue-3: #c8e0ff;
  --main-accent-blue-4: #004cff;
  --main-accent-blue-5: #0243de;
  --main-accent-blue-6: #1152ec;
  --main-accent-blue-7: #0e2b6c;
  --main-accent-success-1: #e6f6eb;
  --main-accent-success-2: #d6f1df;
  --main-accent-success-3: #c4e8d1;
  --main-accent-success-4: #30a46c;
  --main-accent-success-5: #2b9a66;
  --main-accent-success-6: #218358;
  --main-accent-success-7: #193b2d;
  --main-accent-purple-1: #eff0fa;
  --main-accent-purple-2: #e6e7f9;
  --main-accent-purple-3: #dcdef8;
  --main-accent-purple-4: #7a30d5;
  --main-accent-purple-5: #661cc1;
  --main-accent-purple-6: #5f5f90;
  --main-accent-purple-7: #222141;
  --main-accent-orange-1: #ffefd4;
  --main-accent-orange-2: #f4e4c9;
  --main-accent-orange-3: #eadabf;
  --main-accent-orange-4: #eeb664;
  --main-accent-orange-5: #daa250;
  --main-accent-orange-6: #897b62;
  --main-accent-orange-7: #38270d;
  --main-accent-yellow-1: #f6f8d6;
  --main-accent-yellow-2: #eef0ce;
  --main-accent-yellow-3: #e5e7c5;
  --main-accent-yellow-4: #ebef74;
  --main-accent-yellow-5: #d7db60;
  --main-accent-yellow-6: #787a5b;
  --main-accent-yellow-7: #3c3d21;
  --main-accent-pink-1: #fdeaf5;
  --main-accent-pink-2: #faddee;
  --main-accent-pink-3: #f5d0e6;
  --main-accent-pink-4: #c22b8b;
  --main-accent-pink-5: #ae1777;
  --main-accent-pink-6: #89637a;
  --main-accent-pink-7: #4e2d42;
  --use-background-100: #fcfcfc;
  --use-text-positive-loud: #040404;
  --use-text-positive-quiet: #646464;
  --use-text-positive-placeholder: #8d8d8d;
  --use-text-positive-disabled: #bbbbbb;
  --use-text-negative-loud: #fcfcfc;
  --use-text-negative-quiet: #e0e0e0;
  --use-text-negative-placeholder: #cecece;
  --use-text-negative-disabled: #bbbbbb;
  --use-text-neutral-white: #fcfcfc;
  --use-text-accent-brand-loud: #1152ec;
  --use-text-accent-brand-quiet: #0e2b6c;
  --use-text-accent-danger-loud: #ce2c31;
  --use-text-accent-danger-quiet: #641723;
  --use-text-accent-success-loud: #193b2d;
  --use-text-accent-success-quiet: #218358;
  --use-text-accent-green-loud: #34402c;
  --use-text-accent-green-quiet: #647b55;
  --use-text-accent-purple-loud: #222141;
  --use-text-accent-purple-quiet: #5f5f90;
  --use-text-accent-orange-loud: #38270d;
  --use-text-accent-orange-quiet: #897b62;
  --use-text-accent-yellow-loud: #3c3d21;
  --use-text-accent-yellow-quiet: #787a5b;
  --use-button-primary-idle: #040404;
  --use-button-primary-hover: #1e1e1e;
  --use-button-primary-pressed: #323232;
  --use-button-primary-disabled: rgba(0, 0, 0, 0.06);
  --use-button-secondary-idle: rgba(0, 0, 0, 0.03);
  --use-button-secondary-hover: rgba(0, 0, 0, 0.06);
  --use-button-secondary-pressed: rgba(0, 0, 0, 0.09);
  --use-button-secondary-disabled: rgba(0, 0, 0, 0.06);
  --use-stroke-neutral-1: rgba(0, 0, 0, 0.03);
  --use-stroke-neutral-2: rgba(0, 0, 0, 0.06);
  --use-stroke-neutral-3: rgba(0, 0, 0, 0.09);
  --use-stroke-neutral-4: rgba(0, 0, 0, 0.06);
  --use-stroke-accent-1: #040404;
  --use-action-0: rgba(0, 0, 0, 0);
  --use-action-1: rgba(0, 0, 0, 0.03);
  --use-action-2: rgba(0, 0, 0, 0.06);
  --use-action-3: rgba(0, 0, 0, 0.09);
  --use-action-disabled: rgba(0, 0, 0, 0.06);

  /* Typography */
  --font-primary: Inter;
  --font-secondary: 'Bricolage Grotesque';
  --primary: Inter; /* Deprecated: use --font-primary instead */

  --size-h1: 2rem; /* 32px */
  --size-h2: 1.75rem; /* 28px */
  --size-h3: 1.5rem; /* 24px */
  --size-h4: 1.25rem; /* 20px */
  --size-h5: 1.125rem; /* 18px */
  --size-b1: 1rem; /* 16px */
  --size-b2: 0.875rem; /* 14px */
  --size-b3: 0.75rem; /* 12px */
  --size-cap: 0.625rem; /* 10px */
  --secondary: Bricolage Grotesque;

  /* Spacing System (4px grid) */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */

  /* Border Radius */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"],
.dark {
  --main-gray-solid-1: #111111;
  --main-gray-solid-2: #191919;
  --main-gray-solid-3: #313131;
  --main-gray-solid-4: #484848;
  --main-gray-solid-5: #606060;
  --main-gray-solid-6: #6e6e6e;
  --main-gray-solid-7: #b4b4b4;
  --main-gray-solid-8: #e8e8e8;
  --main-gray-solid-9: #f2f2f2;
  --main-gray-solid-10: #fcfcfc;
  --main-gray-alpha-0: rgba(255, 255, 255, 0);
  --main-gray-alpha-1: rgba(255, 255, 255, 0.04);
  --main-gray-alpha-2: rgba(255, 255, 255, 0.06);
  --main-gray-alpha-3: rgba(255, 255, 255, 0.09);
  --main-gray-alpha-4: rgba(255, 255, 255, 0.12);
  --main-gray-alpha-5: rgba(255, 255, 255, 0.15);
  --main-gray-alpha-6: rgba(255, 255, 255, 0.2);
  --main-gray-alpha-7: rgba(255, 255, 255, 0.3);
  --main-gray-alpha-8: rgba(255, 255, 255, 0.5);
  --main-gray-alpha-9: rgba(255, 255, 255, 0.7);
  --main-gray-alpha-10: rgba(255, 255, 255, 0.85);
  --main-accent-brand-1: #fafafa;
  --main-accent-brand-2: #cdcdcd;
  --main-accent-brand-3: #adadad;
  --main-accent-red-1: #3b1219;
  --main-accent-red-2: #500f1c;
  --main-accent-red-3: #611623;
  --main-accent-red-4: #e5484d;
  --main-accent-red-5: #ec5d5e;
  --main-accent-red-6: #ff9592;
  --main-accent-red-7: #ffd1d9;
  --main-accent-green-1: #20261d;
  --main-accent-green-2: #283023;
  --main-accent-green-3: #313b2a;
  --main-accent-green-4: #abe982;
  --main-accent-green-5: #abe982;
  --main-accent-green-6: #b5caa8;
  --main-accent-green-7: #e2f4d8;
  --main-accent-blue-1: #0b2255;
  --main-accent-blue-2: #0b2a74;
  --main-accent-blue-3: #103489;
  --main-accent-blue-4: #004cff;
  --main-accent-blue-5: #0038ee;
  --main-accent-blue-6: #89b5ff;
  --main-accent-blue-7: #cde2ff;
  --main-accent-success-1: #132d21;
  --main-accent-success-2: #113b29;
  --main-accent-success-3: #174933;
  --main-accent-success-4: #30a46c;
  --main-accent-success-5: #33b074;
  --main-accent-success-6: #3dd68c;
  --main-accent-success-7: #b1f1cb;
  --main-accent-purple-1: #232242;
  --main-accent-purple-2: #2d2a5a;
  --main-accent-purple-3: #363466;
  --main-accent-purple-4: #dee0fb;
  --main-accent-purple-5: #dee0fb;
  --main-accent-purple-6: #aeb0ec;
  --main-accent-purple-7: #dee0fb;
  --main-accent-orange-1: #292115;
  --main-accent-orange-2: #342812;
  --main-accent-orange-3: #3c2f19;
  --main-accent-orange-4: #eeb664;
  --main-accent-orange-5: #eeb664;
  --main-accent-orange-6: #c2b298;
  --main-accent-orange-7: #38270d;
  --main-accent-yellow-1: #232418;
  --main-accent-yellow-2: #2b2c1a;
  --main-accent-yellow-3: #33341d;
  --main-accent-yellow-4: #ebef74;
  --main-accent-yellow-5: #ebef74;
  --main-accent-yellow-6: #bec1a0;
  --main-accent-yellow-7: #eef0d9;
  --main-accent-pink-1: #311a29;
  --main-accent-pink-2: #3e1f33;
  --main-accent-pink-3: #48273c;
  --main-accent-pink-4: #fadeef;
  --main-accent-pink-5: #fadeef;
  --main-accent-pink-6: #d2a9c2;
  --main-accent-pink-7: #fadeef;
  --use-background-100: #fcfcfc;
  --use-text-positive-loud: #040404;
  --use-text-positive-quiet: #646464;
  --use-text-positive-placeholder: #8d8d8d;
  --use-text-positive-disabled: #bbbbbb;
  --use-text-negative-loud: #fcfcfc;
  --use-text-negative-quiet: #e0e0e0;
  --use-text-negative-placeholder: #cecece;
  --use-text-negative-disabled: #bbbbbb;
  --use-text-neutral-white: #040404;
  --use-text-accent-brand-loud: #1152ec;
  --use-text-accent-brand-quiet: #0e2b6c;
  --use-text-accent-danger-loud: #ce2c31;
  --use-text-accent-danger-quiet: #641723;
  --use-text-accent-success-loud: #193b2d;
  --use-text-accent-success-quiet: #218358;
  --use-text-accent-green-loud: #34402c;
  --use-text-accent-green-quiet: #647b55;
  --use-text-accent-purple-loud: #222141;
  --use-text-accent-purple-quiet: #5f5f90;
  --use-text-accent-orange-loud: #38270d;
  --use-text-accent-orange-quiet: #897b62;
  --use-text-accent-yellow-loud: #3c3d21;
  --use-text-accent-yellow-quiet: #787a5b;
  --use-button-primary-idle: #040404;
  --use-button-primary-hover: #1e1e1e;
  --use-button-primary-pressed: #323232;
  --use-button-primary-disabled: rgba(0, 0, 0, 0.06);
  --use-button-secondary-idle: rgba(0, 0, 0, 0.03);
  --use-button-secondary-hover: rgba(0, 0, 0, 0.06);
  --use-button-secondary-pressed: rgba(0, 0, 0, 0.09);
  --use-button-secondary-disabled: rgba(0, 0, 0, 0.06);
  --use-stroke-neutral-1: rgba(0, 0, 0, 0.03);
  --use-stroke-neutral-2: rgba(0, 0, 0, 0.06);
  --use-stroke-neutral-3: rgba(0, 0, 0, 0.09);
  --use-stroke-neutral-4: rgba(0, 0, 0, 0.06);
  --use-stroke-accent-1: #040404;
  --use-action-0: rgba(0, 0, 0, 0);
  --use-action-1: rgba(0, 0, 0, 0.03);
  --use-action-2: rgba(0, 0, 0, 0.06);
  --use-action-3: rgba(0, 0, 0, 0.09);
  --use-action-disabled: rgba(0, 0, 0, 0.06);
}