/* ============================================================
   DESIGN TOKENS — P8W Contábil SST SaaS
   Fonte canônica de variáveis. Nunca usar valores diretos nas views.
   Redesign Big-Tech 2026-04-24 — Paleta Linear/Vercel
   ============================================================ */

/* ── Google Fonts — Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Primary (Blue — #0066FF linear.app style) ── */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* ── Accent (Violet — diferenciação) ── */
  --color-accent-50:   #f5f3ff;
  --color-accent-100:  #ede9fe;
  --color-accent-200:  #ddd6fe;
  --color-accent-300:  #c4b5fd;
  --color-accent-400:  #a78bfa;
  --color-accent-500:  #8b5cf6;
  --color-accent-600:  #7c3aed;
  --color-accent-700:  #6d28d9;

  /* ── Success (Emerald) ── */
  --color-success-50:  #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  /* ── Danger (Red) ── */
  --color-danger-50:   #fff1f2;
  --color-danger-100:  #ffe4e6;
  --color-danger-200:  #fecdd3;
  --color-danger-500:  #f43f5e;
  --color-danger-600:  #e11d48;
  --color-danger-700:  #be123c;

  /* ── Warning (Amber) ── */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;

  /* ── Info (Cyan) ── */
  --color-info-50:     #ecfeff;
  --color-info-100:    #cffafe;
  --color-info-500:    #06b6d4;
  --color-info-600:    #0891b2;

  /* ── Neutral — Zinc (mais sofisticado que Slate) ── */
  --color-gray-0:      #ffffff;
  --color-gray-50:     #fafafa;
  --color-gray-100:    #f4f4f5;
  --color-gray-150:    #ebebec;
  --color-gray-200:    #e4e4e7;
  --color-gray-300:    #d1d1d6;
  --color-gray-400:    #a1a1aa;
  --color-gray-500:    #71717a;
  --color-gray-600:    #52525b;
  --color-gray-700:    #3f3f46;
  --color-gray-800:    #27272a;
  --color-gray-850:    #1f1f23;
  --color-gray-900:    #18181b;
  --color-gray-950:    #09090b;

  /* ── Tokens Semânticos — Light Mode ── */
  --color-bg:            #fafafa;
  --color-bg-card:       #ffffff;
  --color-bg-secondary:  #f4f4f5;
  --color-bg-hover:      #f4f4f5;
  --color-bg-muted:      #f4f4f5;
  --color-bg-subtle:     #e4e4e7;
  --color-bg-overlay:    rgba(0,0,0,.45);

  --color-text:          #18181b;
  --color-text-secondary:#52525b;
  --color-text-muted:    #a1a1aa;
  --color-text-disabled: #d1d1d6;
  --color-text-label:    #3f3f46;
  --color-text-inverse:  #ffffff;

  --color-border:        #e4e4e7;
  --color-border-input:  #d1d1d6;
  --color-border-focus:  var(--color-primary-500);
  --color-divide:        #f4f4f5;

  --color-primary:       var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-success:       var(--color-success-500);
  --color-danger:        var(--color-danger-500);
  --color-warning:       var(--color-warning-500);
  --color-info:          var(--color-info-500);

  /* ── Aliases legado (mantidos para compatibilidade) ── */
  --primary:             var(--color-primary-500);
  --primary-dark:        var(--color-primary-600);
  --primary-light:       var(--color-primary-50);
  --secondary:           var(--color-text-secondary);
  --success:             var(--color-success-500);
  --danger:              var(--color-danger-500);
  --warning:             var(--color-warning-500);
  --info:                var(--color-info-500);
  --bg:                  var(--color-bg);
  --bg-card:             var(--color-bg-card);
  --text:                var(--color-text);
  --text-primary:        var(--color-text);
  --dark:                var(--color-gray-900);
  --white:               #ffffff;
  --border:              var(--color-border);
  --border-light:        var(--color-divide);
  --font:                var(--font-family);
  --transition:          var(--transition-base);
  --radius:              var(--radius-md);

  /* ── Tipografia — Inter ── */
  --font-family:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --font-size-xs:      0.6875rem;
  --font-size-sm:      0.8125rem;
  --font-size-base:    0.9375rem;
  --font-size-md:      1rem;
  --font-size-lg:      1.0625rem;
  --font-size-xl:      1.1875rem;
  --font-size-2xl:     1.375rem;
  --font-size-3xl:     1.75rem;
  --font-size-4xl:     2.25rem;
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;
  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-base:     1.5;
  --line-height-relaxed:  1.65;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-snug:  -0.015em;
  --letter-spacing-base:  -0.005em;

  /* ── Espaçamento ── */
  --spacing-0:   0;
  --spacing-px:  1px;
  --spacing-0h:  0.125rem;
  --spacing-1:   0.25rem;
  --spacing-1h:  0.375rem;
  --spacing-2:   0.5rem;
  --spacing-2h:  0.625rem;
  --spacing-3:   0.75rem;
  --spacing-4:   1rem;
  --spacing-5:   1.25rem;
  --spacing-6:   1.5rem;
  --spacing-7:   1.75rem;
  --spacing-8:   2rem;
  --spacing-10:  2.5rem;
  --spacing-12:  3rem;
  --spacing-16:  4rem;
  --spacing-20:  5rem;

  /* ── Border Radius ── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;
  --radius-input: 8px;
  --radius-card:  10px;
  --radius-badge: 100px;

  /* ── Sombras ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 10px 20px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl:    0 20px 40px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05);
  --shadow-2xl:   0 40px 80px rgba(0,0,0,.15);
  --shadow-card:  0 0 0 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.04);
  --shadow-card-hover: 0 0 0 1px rgba(59,130,246,.12), 0 8px 24px rgba(0,0,0,.08);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,.2);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.1);
  --shadow:       var(--shadow-md);

  /* ── Gradientes ── */
  --gradient-primary:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-accent:    linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-success:   linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-danger:    linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --gradient-warning:   linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-mesh:      radial-gradient(at 40% 20%, rgba(59,130,246,.06) 0%, transparent 50%),
                        radial-gradient(at 80% 80%, rgba(139,92,246,.04) 0%, transparent 50%);

  /* ── Transições ── */
  --transition-instant: 80ms ease;
  --transition-fast:    130ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    320ms ease;
  --transition-bounce:  300ms cubic-bezier(.34,1.56,.64,1);

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-max:      999;

  /* ── Layout ── */
  --sidebar-w:          240px;
  --sidebar-collapsed:  58px;
  --topbar-h:           56px;
  --sidebar-width:      240px;
  --header-height:      56px;
  --container:          1280px;
  --content-max:        1140px;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg:            #09090b;
  --color-bg-card:       #18181b;
  --color-bg-secondary:  #27272a;
  --color-bg-hover:      #27272a;
  --color-bg-muted:      #3f3f46;
  --color-bg-subtle:     #3f3f46;

  --color-text:          #fafafa;
  --color-text-secondary:#a1a1aa;
  --color-text-muted:    #71717a;
  --color-text-disabled: #3f3f46;
  --color-text-label:    #d4d4d8;

  --color-border:        #27272a;
  --color-border-input:  #3f3f46;
  --color-divide:        #18181b;

  --color-primary:       var(--color-primary-400);
  --color-primary-hover: var(--color-primary-300);

  /* Aliases legado dark */
  --primary:             var(--color-primary-400);
  --primary-dark:        var(--color-primary-300);
  --primary-light:       var(--color-primary-900);
  --secondary:           var(--color-text-secondary);
  --bg:                  var(--color-bg);
  --bg-card:             var(--color-bg-card);
  --text:                var(--color-text);
  --text-primary:        var(--color-text);
  --dark:                var(--color-gray-100);
  --white:               var(--color-bg-card);
  --border:              var(--color-border);
  --border-light:        var(--color-divide);

  --shadow-xs:    0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:    0 4px 8px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:    0 10px 20px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.25);
  --shadow-card:  0 0 0 1px rgba(255,255,255,.04);
  --shadow-card-hover: 0 0 0 1px rgba(99,151,246,.2), 0 8px 24px rgba(0,0,0,.3);
  --shadow-focus: 0 0 0 3px rgba(96,165,250,.25);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.5);
}