/*
 * IronMatch CRE — Master Design Tokens
 * Single source of truth for all colors, spacing, and shadows.
 * All other CSS files and inline styles must reference these values.
 *
 * Palette:
 *   Charcoal:     #3D4246  (primary dark — headers, nav, fieldset labels)
 *   Charcoal Dark:#2a2d30  (deeper dark — gradient stops, breadcrumbs)
 *   Bronze:       #C89968  (accent — buttons, links, borders, highlights)
 *   Bronze Dark:  #b47d54  (hover state for bronze elements)
 *   Warm White:   #F7F5F2  (page background — warm, not cold gray)
 *   Card White:   #FFFFFF  (form panels, table rows)
 *   Border Gray:  #E0DDD8  (dividers, input borders)
 *   Text Main:    #2a2d30  (body text - WCAG AA contrast)
 *   Text Muted:   #4A5568  (help text, labels - improved contrast)
 *   Text Secondary: #5A6470 (secondary info - improved contrast)
 *   Text Disabled: #5A6470 (disabled states - improved contrast)
 *
 * Status Colors (always used with a border, never as background alone):
 *   Success:  #4CAF50
 *   Warning:  #F5A623
 *   Danger:   #E53935
 *   Info:     #2196F3
 */

:root {
  /* Core Brand */
  --im-primary:        #3D4246;
  --im-primary-dark:   #2a2d30;
  --im-accent:         #C89968;
  --im-accent-dark:    #b47d54;
  --im-accent-light:   rgba(200, 153, 104, 0.15);

  /* Backgrounds */
  --im-bg-page:        #F7F5F2;
  --im-bg-card:        #FFFFFF;
  --im-bg-hover:       rgba(200, 153, 104, 0.08);

  /* Borders */
  --im-border:         #E0DDD8;
  --im-border-focus:   #C89968;

  /* Text */
  --im-text:           #2a2d30;
  --im-text-muted:     #4A5568;  /* Darker gray for better contrast (was #6B7280) */
  --im-text-secondary: #5A6470;  /* For secondary info, higher contrast than old #888/#999 */
  --im-text-disabled:  #5A6470;  /* For disabled states, higher contrast than old #666 */
  --im-text-on-dark:   #FFFFFF;
  --im-text-on-accent: #FFFFFF;

  /* Gradients */
  --im-gradient-header: linear-gradient(135deg, var(--im-primary) 0%, var(--im-primary-dark) 100%);
  --im-gradient-accent: linear-gradient(135deg, var(--im-accent) 0%, var(--im-accent-dark) 100%);

  /* Shadows */
  --im-shadow-sm:   0 1px 3px rgba(0,0,0,0.07);
  --im-shadow-md:   0 2px 6px rgba(0,0,0,0.12);
  --im-shadow-lg:   0 4px 12px rgba(0,0,0,0.15);

  /* Status */
  --im-success:     #4CAF50;
  --im-warning:     #F5A623;
  --im-danger:      #E53935;
  --im-info:        #2196F3;

  /* Spacing scale */
  --im-radius-sm:   4px;
  --im-radius-md:   6px;
  --im-radius-lg:   8px;

  /* ── Button palette — semantic roles, not visual color names ──
     These are the single source of truth for all button colors.
     Never hardcode hex values in button CSS — always use these vars. */
  --im-btn-primary-bg:      #C89968;   /* Bronze — primary CTA */
  --im-btn-primary-dark:    #b47d54;
  --im-btn-secondary-bg:    #3D4246;   /* Charcoal — nav / secondary */
  --im-btn-secondary-dark:  #2a2d30;
  --im-btn-danger-bg:       #c62828;   /* Red — destructive */
  --im-btn-danger-dark:     #b71c1c;
  --im-btn-success-bg:      #2C7A4B;   /* Forest green — confirm / add */
  --im-btn-success-dark:    #245f3b;
  --im-btn-navy-bg:         #417690;   /* Navy — secondary workflow */
  --im-btn-navy-dark:       #2d5468;
  --im-btn-teal-bg:         #00695c;
  --im-btn-teal-dark:       #004d40;
  --im-btn-purple-bg:       #6a1b9a;
  --im-btn-purple-dark:     #4a1270;
  --im-btn-slate-bg:        #455a64;
  --im-btn-slate-dark:      #37474f;
  --im-btn-orange-bg:       #ef6c00;
  --im-btn-orange-dark:     #c55a00;
}