/* ==========================================================================
   Mango DMA Design Tokens — DESIGN-SYSTEM-01 (86ex4db39)
   Single source of truth for all dashboard visual properties.
   Zero hardcoded hex values in any component — use these tokens.

   Semantic rules:
     Orange = human action (approve, submit, configure, pay)
     Cyan   = AI-generated insight (briefings, RORA, recommendations)
     Navy   = navigation, structure, authority
     Green/amber/red = status indicators
   ========================================================================== */

:root {
  /* === BRAND === */
  --color-primary:          #C05600;
  --color-primary-light:    #FFF7ED;
  --color-primary-dark:     #7C2D12;
  --color-navy:             #1A1A2E;
  --color-navy-hover:       #2D2D4A;
  --color-cyan:             #00D4FF;
  --color-cyan-light:       #E0F9FF;
  --color-cyan-dark:        #0099BF;

  /* === TEXT === */
  --color-text-primary:     #1A1A1A;
  --color-text-secondary:   #6B6B6B;
  --color-text-muted:       #A3A3A3;
  --color-text-inverse:     #FFFFFF;
  --color-text-nav:         #FFFFFF;
  --color-text-nav-muted:   rgba(255,255,255,0.65);
  --color-text-orange:      #C05600;
  --color-text-cyan:        #0085BF;

  /* === SURFACES === */
  --color-surface-page:     #F5F5F5;
  --color-surface-card:     #FFFFFF;
  --color-surface-subtle:   #F9F9F9;
  --color-surface-nav:      #1A1A2E;
  --color-surface-overlay:  rgba(0,0,0,0.5);

  /* === BORDERS === */
  --color-border-light:     #E5E5E5;
  --color-border-mid:       #D4D4D4;
  --color-border-orange:    #C05600;
  --color-border-cyan:      #00D4FF;

  /* === SEMANTIC === */
  --color-success:          #22C55E;
  --color-success-bg:       #DCFCE7;
  --color-success-text:     #166534;
  --color-warning:          #F59E0B;
  --color-warning-bg:       #FEF3C7;
  --color-warning-text:     #92400E;
  --color-danger:           #EF4444;
  --color-danger-bg:        #FEE2E2;
  --color-danger-text:      #991B1B;
  --color-info:             #3B82F6;
  --color-info-bg:          #EFF6FF;
  --color-info-text:        #1D4ED8;

  /* === STATUS INDICATORS (Material-style) — used by charts, badges, timelines === */
  --color-status-green:     #2E7D32;  /* strong success / published / healthy */
  --color-status-green-bg:  #E8F5E9;
  --color-status-green-mid: #28A745;  /* success buttons/badges */
  --color-status-orange:    #E65100;  /* warning / needs-attention */
  --color-status-orange-bg: #FFF8E1;  /* amber background */
  --color-status-red:       #C62828;  /* error / critical */
  --color-status-red-mid:   #C42B2A;  /* alternate red */
  --color-status-red-bg:    #FFEBEE;
  --color-status-pink:      #C2185B;  /* social platform accent */
  --color-status-pink-bg:   #FCE4EC;
  --color-status-blue:      #1565C0;  /* info accent */
  --color-status-blue-bg:   #E3F2FD;
  --color-status-gold:      #C9A84C;  /* premium plan accent */
  --color-status-navy-deep: #0F2557;  /* deep navy gradient stop */
  --color-status-amber:     #FFC107;  /* pending / in-review */
  --color-status-amber-bg:  #FFF5EB;

  /* === NEUTRALS === */
  --color-neutral-dark:     #4A4A4A;
  --color-neutral-mid:      #A0A0A0;
  --color-neutral-light:    #9E9E9E;
  --color-neutral-subtle:   #E9ECEF;
  --color-neutral-divider:  #E0E0E0;
  --color-neutral-wash:     #F0F0F0;

  /* === TINT BACKGROUNDS === */
  --color-tint-orange:      #FFF0E6;  /* primary tint */
  --color-tint-orange-2:    #FFF5EB;
  --color-tint-cream:       #FFF3E0;
  --color-tint-cream-2:     #FFE082;
  --color-tint-pink:        #FFF5F5;
  --color-tint-green:       #F0FFF4;

  /* === TYPOGRAPHY === */
  --font-family:            'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:           12px;
  --font-size-sm:           12px;
  --font-size-base:         13px;
  --font-size-md:           14px;
  --font-size-lg:           16px;
  --font-size-xl:           18px;
  --font-size-2xl:          24px;
  --font-size-3xl:          30px;
  --font-size-metric:       28px;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --line-height-tight:      1.3;
  --line-height-base:       1.5;
  --line-height-relaxed:    1.65;
  --letter-spacing-label:   0.5px;

  /* === SPACING (4px base) === */
  --space-0:  0px;
  --space-px: 1px;
  --space-1:  4px;       /* 0.25rem */
  --space-2:  8px;       /* 0.5rem  */
  --space-3:  12px;      /* 0.75rem */
  --space-4:  16px;      /* 1rem    */
  --space-5:  20px;      /* 1.25rem */
  --space-6:  24px;      /* 1.5rem  */
  --space-8:  32px;      /* 2rem    */
  --space-10: 40px;      /* 2.5rem  */
  --space-12: 48px;      /* 3rem    */
  --space-16: 64px;      /* 4rem    */

  /* === RADII === */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;
  --radius-pill: 100px;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* === BREAKPOINTS (reference values — use in media queries) === */
  --breakpoint-mobile:   480px;
  --breakpoint-tablet:   768px;
  --breakpoint-desktop:  1024px;
  --breakpoint-wide:     1440px;

  /* === Z-INDEX SCALE === */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-modal:     1000;
  --z-toast:     10000;
  --z-tooltip:   10001;

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  /* Keep legacy alias */
  --transition-base:   200ms ease;
}