/* ══════════════════════════════════════════════════════════════════════════
   ACMFacil Website — Design Tokens
   Espelho do plugin acmfacil/ui/css/tokens.css com adições de marketing.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ──────────── UI SCALE (multiplicador global) ──────────── */
  --ui-scale: 1;

  /* ──────────── TIPOGRAFIA ──────────── */
  --font-sans: 'Geist', Inter, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  --text-xs:   calc(12px * var(--ui-scale));
  --text-sm:   calc(14px * var(--ui-scale));
  --text-base: calc(16px * var(--ui-scale));
  --text-lg:   calc(18px * var(--ui-scale));
  --text-xl:   calc(20px * var(--ui-scale));
  --text-2xl:  calc(24px * var(--ui-scale));
  --text-3xl:  calc(30px * var(--ui-scale));
  --text-4xl:  calc(36px * var(--ui-scale));
  --text-5xl:  calc(48px * var(--ui-scale));
  --text-6xl:  calc(60px * var(--ui-scale));

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.1em;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ──────────── ESCALA NEUTRA ──────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* ──────────── ACENTOS ──────────── */
  --accent-blue-50:    #eff6ff;
  --accent-blue-100:   #dbeafe;
  --accent-blue-600:   #2563eb;
  --accent-blue-700:   #1d4ed8;

  --accent-purple-50:  #faf5ff;
  --accent-purple-100: #f3e8ff;
  --accent-purple-600: #9333ea;

  --accent-emerald-50:  #ecfdf5;
  --accent-emerald-100: #d1fae5;
  --accent-emerald-600: #059669;

  --accent-amber-50:   #fffbeb;
  --accent-amber-100:  #fef3c7;
  --accent-amber-600:  #d97706;

  --accent-red-50:     #fef2f2;
  --accent-red-100:    #fee2e2;
  --accent-red-600:    #dc2626;

  /* ──────────── GOLD (acento ACM/alumínio) ──────────── */
  /* Usado em CTAs principais, badge "Mais popular", border do logo. */
  --gold:        #d4af37;
  --gold-soft:   #e6c97a;
  --gold-dark:   #b08d24;
  --gold-bg:     #faf6e6;
  --gold-border: #f0e3a8;

  /* ──────────── SEMÂNTICAS ──────────── */
  --bg:             var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-inverted:    var(--neutral-900);

  --text:           var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-inverted:  var(--neutral-0);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);

  --primary:        var(--neutral-900);
  --primary-hover:  var(--neutral-800);
  --primary-text:   var(--neutral-0);

  --success:        var(--accent-emerald-600);
  --success-bg:     var(--accent-emerald-50);
  --success-border: var(--accent-emerald-100);

  --info:           var(--accent-blue-600);
  --info-bg:        var(--accent-blue-50);
  --info-border:    var(--accent-blue-100);

  --warning:        var(--accent-amber-600);
  --warning-bg:     var(--accent-amber-50);
  --warning-border: var(--accent-amber-100);

  --danger:         var(--accent-red-600);
  --danger-bg:      var(--accent-red-50);
  --danger-border:  var(--accent-red-100);

  /* ──────────── ESPAÇAMENTO (escalado) ──────────── */
  --space-0:  0;
  --space-1:  calc(4px  * var(--ui-scale));
  --space-2:  calc(8px  * var(--ui-scale));
  --space-3:  calc(12px * var(--ui-scale));
  --space-4:  calc(16px * var(--ui-scale));
  --space-5:  calc(20px * var(--ui-scale));
  --space-6:  calc(24px * var(--ui-scale));
  --space-7:  calc(28px * var(--ui-scale));
  --space-8:  calc(32px * var(--ui-scale));
  --space-10: calc(40px * var(--ui-scale));
  --space-12: calc(48px * var(--ui-scale));
  --space-14: calc(56px * var(--ui-scale));
  --space-16: calc(64px * var(--ui-scale));
  --space-20: calc(80px * var(--ui-scale));
  --space-24: calc(96px * var(--ui-scale));
  --space-32: calc(128px * var(--ui-scale));

  /* ──────────── RADIUS ──────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ──────────── SHADOWS ──────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.25);

  /* ──────────── TRANSIÇÕES ──────────── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* ──────────── Z-INDEX ──────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-modal:    500;
  --z-tooltip:  1000;
  --z-toast:    2000;
}

/* ──────────── UI SCALE (data-attribute) ──────────── */
html[data-ui-scale="sm"] { --ui-scale: 0.85; }
html[data-ui-scale="md"] { --ui-scale: 1; }
html[data-ui-scale="lg"] { --ui-scale: 1.15; }

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:             #0a0a0a;
  --bg-subtle:      #171717;
  --bg-muted:       #262626;
  --bg-inverted:    #fafafa;

  --text:           #fafafa;
  --text-secondary: #d4d4d4;
  --text-muted:     #a3a3a3;
  --text-subtle:    #737373;
  --text-inverted:  #0a0a0a;

  --border:         #262626;
  --border-strong:  #404040;
  --border-subtle:  #1a1a1a;

  --primary:        #fafafa;
  --primary-hover:  #e5e5e5;
  --primary-text:   #0a0a0a;

  --success-bg:     rgba(16, 185, 129, 0.12);
  --success-border: rgba(16, 185, 129, 0.30);
  --info-bg:        rgba(59, 130, 246, 0.12);
  --info-border:    rgba(59, 130, 246, 0.30);
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.30);
  --danger-bg:      rgba(239, 68, 68, 0.12);
  --danger-border:  rgba(239, 68, 68, 0.30);

  --gold-bg:     rgba(212, 175, 55, 0.10);
  --gold-border: rgba(212, 175, 55, 0.32);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.3);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.6);
  --shadow-gold: 0 8px 32px rgba(212, 175, 55, 0.32);
}