/**
 * ART CLEANER — DESIGN SYSTEM TOKENS
 * Premium Light / White Architectural Palette
 * 75% Light/White | 15% Near-Black Charcoal | 10% Art Cleaner Orange (#EC642B)
 */

:root {
  /* =====================================================================
     1. SEMANTIC SURFACES & FOUNDATION (LIGHT / WHITE DOMINANT)
     ===================================================================== */
  --bg-primary: #FFFFFF;              /* Pure Crisp White */
  --bg-secondary: #F8F9FA;            /* Soft Mineral Off-White */
  --bg-subtle: #F3F4F6;               /* Clean Light Gray Section Background */
  --bg-stone: #EFEFED;                /* Warm Light Stone */
  --bg-inverse: #121316;              /* Deep Architectural Charcoal */

  --surface: #FFFFFF;                 /* Crisp Pure White Surface for Cards */
  --surface-soft: #F9FAFB;            /* Subtle Neutral Card Background */
  --surface-stone: #F3F4F6;           /* Mineral Stone Surface */
  --surface-dark: #141417;            /* Controlled Dark Contrast Surface */
  --surface-glass: rgba(255, 255, 255, 0.90);

  /* =====================================================================
     2. TYPOGRAPHY & CONTRAST HIERARCHY (HIGH-CONTRAST WCAG AAA)
     ===================================================================== */
  --text-primary: #121316;            /* Deep Charcoal (16.5:1 Contrast on White) */
  --text-secondary: #344054;          /* Slate Charcoal (9.2:1 Contrast on White) */
  --text-muted: #667085;              /* Clear Legible Technical Gray (5.4:1 Contrast) */
  --text-dim: #5E6877;                /* Supporting Meta Detail — readable on white */
  --text-inverse: #FFFFFF;            /* Pure White Text for Contrast Moments */

  /* =====================================================================
     3. CANONICAL ART CLEANER ORANGE ACCENT (SURGICAL 5-10% APPLICATION)
     ===================================================================== */
  --brand: #B94212;                   /* Verified Art Cleaner Orange, AA-safe for white text */
  --brand-hover: #96350D;             /* Hover State */
  --brand-active: #7A2B09;            /* Pressed State */
  --brand-subtle: rgba(236, 100, 43, 0.08); /* 8% Tint for Badges and Accents */
  --brand-glow: rgba(236, 100, 43, 0.22);   /* High-key Radial Glow */
  --brand-text-accessible: #C24312;   /* High Contrast Orange for Small Text */
  --brand-gradient: linear-gradient(135deg, #EC642B 0%, #F97316 100%);

  /* =====================================================================
     4. BORDERS & ARCHITECTURAL LINE SYSTEM
     ===================================================================== */
  --border-subtle: rgba(18, 19, 22, 0.07);
  --border-default: rgba(18, 19, 22, 0.12);
  --border-strong: rgba(18, 19, 22, 0.22);
  --border-accent: rgba(236, 100, 43, 0.35);

  /* =====================================================================
     5. BACKWARDS COMPATIBILITY MAPPINGS (PRESERVES EXISTING SELECTORS)
     ===================================================================== */
  --color-surface-base: var(--bg-primary);
  --color-surface-card: var(--surface);
  --color-surface-card-hover: var(--surface-soft);
  --color-surface-void: var(--bg-secondary);
  --color-surface-elevated: var(--surface);
  --color-surface-glass: var(--surface-glass);

  --color-border-subtle: var(--border-subtle);
  --color-border-default: var(--border-default);
  --color-border-strong: var(--border-strong);
  --color-border-accent: var(--border-accent);

  --color-accent-primary: var(--brand);
  --color-accent-hover: var(--brand-hover);
  --color-accent-active: var(--brand-active);
  --color-accent-subtle: var(--brand-subtle);
  --color-accent-glow: var(--brand-glow);
  --color-accent-gradient: var(--brand-gradient);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-dim: var(--text-dim);
  --color-text-inverse: var(--text-inverse);

  /* =====================================================================
     6. STATUS & CONVERSÃO
     ===================================================================== */
  --color-status-success: #16A34A;
  --color-status-success-bg: rgba(22, 163, 74, 0.10);
  --color-status-warning: #D97706;
  --color-status-warning-bg: rgba(217, 119, 6, 0.10);
  --color-status-danger: #DC2626;
  --color-status-danger-bg: rgba(220, 38, 38, 0.10);
  
  --color-whatsapp: #128C3A;
  --color-whatsapp-hover: #0E7130;
  --color-whatsapp-text: #FFFFFF;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.28);

  /* =====================================================================
     7. ANTES & DEPOIS BADGES
     ===================================================================== */
  --color-badge-before-text: #DC2626;
  --color-badge-before-bg: rgba(255, 255, 255, 0.94);
  --color-badge-before-border: rgba(220, 38, 38, 0.35);

  --color-badge-after-text: #EC642B;
  --color-badge-after-bg: rgba(255, 255, 255, 0.94);
  --color-badge-after-border: rgba(236, 100, 43, 0.45);

  /* =====================================================================
     8. ESPAÇAMENTO (8-POINT HARMONIC GRID)
     ===================================================================== */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* =====================================================================
     9. GEOMETRIA & ELEVAÇÃO (LIGHT PHYSICAL SHADOWS)
     ===================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-subtle: 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-card: 0 4px 16px -2px rgba(16, 24, 40, 0.06), 0 0 0 1px var(--border-subtle);
  --shadow-card-hover: 0 16px 32px -4px rgba(16, 24, 40, 0.10), 0 0 0 1px var(--border-default);
  --shadow-dock: 0 -4px 20px rgba(16, 24, 40, 0.08), 0 -1px 0 var(--border-subtle);

  /* =====================================================================
     10. TRANSIÇÕES & FÍSICA
     ===================================================================== */
  --ease-technical: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mechanical: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 450ms;

  /* =====================================================================
     11. LAYOUT & CONTAINERS
     ===================================================================== */
  --container-max-width: 1320px;
  --container-narrow-width: 1040px;
  --container-wide-width: 1440px;
  --container-padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* =====================================================================
     12. TECHNICAL MONOSPACE & EDITORIAL FONTS
     ===================================================================== */
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* =====================================================================
     13. 3D PERSPECTIVE & AMBIENT DEPTH
     ===================================================================== */
  --stage-perspective: 1200px;
  --shadow-float: 0 28px 56px -12px rgba(18, 19, 22, 0.12), 0 0 0 1px rgba(18, 19, 22, 0.08);
  --shadow-deep: 0 32px 64px -16px rgba(18, 19, 22, 0.16);
  --grid-line-color: rgba(18, 19, 22, 0.05);
  --glass-high: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(18, 19, 22, 0.09);
}