/* ============================================================
   Meeplebay Design System — Design Tokens
   Source: new-design.json v1.0.0
   ============================================================ */

:root {
--color-bg-main: #fdfdfd;

  /* ── Brand ── */
  --color-brand-100: #FFF4E5;
  --color-brand-200: #FFE4BF;
  --color-brand-300: #FFD08A;
  --color-brand-400: #FFB95C;
  --color-brand-500: #FAA42A;
  --color-brand-600: #E08F1F;
  --color-brand-700: #B87318;
  --color-brand-800: #8A5612;
  --color-brand-900: #59370B;

  /* ── Secondary ── */
  --color-secondary-100: #F1F8EA;
  --color-secondary-200: #DCEECE;
  --color-secondary-300: #C3E0AA;
  --color-secondary-400: #A5CF81;
  --color-secondary-500: #86BD56;
  --color-secondary-600: #73A649;
  --color-secondary-700: #5D853B;
  --color-secondary-800: #46642C;
  --color-secondary-900: #2D401C;

  /* ── Gray ── */
  --color-gray-100: #F9FAFB;
  --color-gray-200: #F1F3F5;
  --color-gray-300: #E6E8EB;
  --color-gray-400: #D1D5DB;
  --color-gray-500: #9CA3AF;
  --color-gray-600: #6B7280;
  --color-gray-700: #4B5563;
  --color-gray-800: #374151;
  --color-gray-900: #111827;

  /* ── Success ── */
  --color-success-100: #E7F8EF;
  --color-success-200: #C7EED9;
  --color-success-300: #9FE2BF;
  --color-success-400: #6DD19F;
  --color-success-500: #36B37E;
  --color-success-600: #2C9B6C;
  --color-success-700: #217553;
  --color-success-800: #16513B;
  --color-success-900: #0C2E23;

  /* ── Info ── */
  --color-info-100: #E6F2FF;
  --color-info-200: #C5E1FF;
  --color-info-300: #9DCCFF;
  --color-info-400: #6FB2FF;
  --color-info-500: #3D8BFF;
  --color-info-600: #2F73E6;
  --color-info-700: #2459B3;
  --color-info-800: #193F80;
  --color-info-900: #0F2650;

  /* ── Warning ── */
  --color-warning-100: #FFF6E6;
  --color-warning-200: #FFE8BF;
  --color-warning-300: #FFD58C;
  --color-warning-400: #FFC057;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D48706;
  --color-warning-700: #A66704;
  --color-warning-800: #754702;
  --color-warning-900: #422701;

  /* ── Danger ── */
  --color-danger-100: #FDECEC;
  --color-danger-200: #F8CFCF;
  --color-danger-300: #F1A8A8;
  --color-danger-400: #E87979;
  --color-danger-500: #E54848;
  --color-danger-600: #CC3838;
  --color-danger-700: #A52C2C;
  --color-danger-800: #761F1F;
  --color-danger-900: #450F0F;

  /* ── Semantic text ── */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #6B7280;
  --text-inverse:   #FFFFFF;

  /* ── Semantic background ── */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary:  #F1F3F5;
  --bg-inverse:   #111827;

  /* ── Spacing ── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ── Border radius ── */
  --radius-button: 4px;
  --radius-card:   8px;
  --radius-input:  4px;
  --radius-modal:  8px;
  --radius-pill:   999px;

  /* ── Borders ── */
  --border-subtle:  1px solid  #EAEAEA;
  --border-light:   1px solid #E6E8EB;
  --border-default: 1px solid #D1D5DB;
  --border-strong:  1px solid #9CA3AF;
  --border-focus:   2px solid #4F7CF7;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.16);

  /* ── Motion ── */
  --motion-fast:   120ms;
  --motion-normal: 200ms;
  --motion-slow:   320ms;
  --motion-ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typography ── */
  --font-family: Inter, system-ui, -apple-system, sans-serif;

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* ── Layout ── */
  --container-max:    1280px;
  --container-pad-x: 24px;
  --content-max:     1200px;
  --header-height:   72px;
  --sidebar-width:   260px;

  /* ── Component aliases ── */
  --btn-radius:    var(--radius-button);
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;

  --input-height: 40px;
  --input-radius: var(--radius-input);
  --input-pad:    0 var(--space-3);

  --card-radius:  var(--radius-card);
  --card-pad:     var(--space-6);
  --card-border:  var(--border-light);
  --card-shadow:  var(--shadow-xs);
  --card-bg:      var(--bg-primary);

  --navbar-bg:     var(--bg-primary);
  --navbar-border: var(--border-light);

  /* ── Marketplace condition badge colors ── */
  --condition-new:       #36B37E;
  --condition-like-new:  #3D8BFF;
  --condition-good:      #F59E0B;
  --condition-fair:      #9CA3AF;
}