/**
 * Apple Spare Market — Design tokens
 * All custom styles reference these variables. Change here, propagate everywhere.
 */

:root {
  /* ─── Colors: Ink (text + dark surfaces) ─── */
  --asm-ink:           #0a1628;
  --asm-ink-2:         #142847;
  --asm-ink-3:         #1a2d4a;
  --asm-ink-soft:      #3d4f63;

  /* ─── Colors: Surface ─── */
  --asm-surface:       #ffffff;
  --asm-surface-2:     #f8f9fb;
  --asm-surface-3:     #f1f3f5;
  --asm-surface-4:     #e8ecf0;

  /* ─── Colors: Text ─── */
  --asm-text:          #0a1628;
  --asm-text-muted:    #6b7c8e;
  --asm-text-dim:      #9aa5b2;
  --asm-text-on-dark:  rgba(255, 255, 255, 0.92);
  --asm-text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* ─── Colors: Border ─── */
  --asm-border:        #e3e8ee;
  --asm-border-2:      #d4dae2;
  --asm-border-dark:   rgba(255, 255, 255, 0.1);

  /* ─── Colors: Accent (primary action / sales) ─── */
  --asm-accent:        #ff6b35;
  --asm-accent-hover:  #f15e2a;
  --asm-accent-dark:   #c2410c;
  --asm-accent-soft:   #fff5e6;
  --asm-accent-soft-2: #ffe8d6;
  --asm-accent-tag-bg: #ffeae0;

  /* ─── Colors: Status ─── */
  --asm-success:       #2d6e2d;
  --asm-success-soft:  #ecf5ee;
  --asm-warning:       #f59e0b;
  --asm-warning-text:  #b87510;
  --asm-warning-soft:  #fef3e6;
  --asm-info:          #3b8df0;
  --asm-info-soft:     #e6f1fb;
  --asm-info-strong:   #1f4d8f;

  /* ─── Colors: Tag families (for category cards) ─── */
  --asm-tag-purple-bg: #f4eef8;
  --asm-tag-purple-text: #553987;
  --asm-tag-red-bg:    #fdecec;
  --asm-tag-red-text:  #a32d2d;

  /* ─── Colors: Service ─── */
  --asm-whatsapp:      #25d366;
  --asm-whatsapp-hover: #20bd5a;

  /* ─── Typography ─── */
  --asm-font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Radius ─── */
  --asm-radius-xs:     3px;
  --asm-radius-sm:     4px;
  --asm-radius-md:     6px;
  --asm-radius-lg:     8px;
  --asm-radius-xl:     12px;
  --asm-radius-2xl:    16px;
  --asm-radius-pill:   999px;

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

  /* ─── Shadows (used sparingly) ─── */
  --asm-shadow-sm:     0 1px 2px rgba(10, 22, 40, 0.04);
  --asm-shadow-md:     0 2px 0 rgba(10, 22, 40, 0.02), 0 4px 12px rgba(10, 22, 40, 0.04);
  --asm-shadow-lg:     0 4px 24px rgba(10, 22, 40, 0.08);

  /* ─── Transitions ─── */
  --asm-transition:    150ms ease;
}