/* ─────────────────────────────────────────
   A.R.C.A — Design Tokens v1.0
   Fonte única de verdade para cores, tipografia,
   espaçamento e componentes.
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   TIPOGRAFIA & LAYOUT (invariáveis por tema)
───────────────────────────────────────── */
:root {
  --font-body: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Menlo', 'Courier New', monospace;

  --text-overline: 10px;
  --text-caption:  11px;
  --text-label:    12px;
  --text-sm:       13px;
  --text-body:     14px;
  --text-md:       15px;
  --text-lg:       17px;
  --text-xl:       20px;
  --text-2xl:      24px;
  --text-3xl:      30px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-body:   1.7;

  --tracking-overline: 0.1em;

  /* ── Raios ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Espaçamento ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* ─────────────────────────────────────────
   PESOS — CLARO
───────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --fw-overline: 700;
  --fw-h1:       800;
  --fw-h2:       700;
  --fw-h3:       700;
  --fw-body:     500;
  --fw-label:    700;
  --fw-caption:  400;
  --fw-metric:   800;
  --fw-btn:      700;
}

/* ─────────────────────────────────────────
   PESOS — ESCURO
───────────────────────────────────────── */
:root[data-theme="dark"] {
  --fw-overline: 500;
  --fw-h1:       600;
  --fw-h2:       500;
  --fw-h3:       500;
  --fw-body:     400;
  --fw-label:    500;
  --fw-caption:  300;
  --fw-metric:   600;
  --fw-btn:      500;
}

/* ─────────────────────────────────────────
   CORES — TEMA CLARO
───────────────────────────────────────── */
:root,
:root[data-theme="light"] {

  /* ── Primária ── */
  --color-primary:           #703408;
  --color-primary-hover:     #5A2806;
  --color-primary-active:    #4A2005;
  --color-primary-light:     rgba(112, 52, 8, 0.08);
  --color-primary-subtle:    #F5EBE0;
  --color-primary-border:    #E0C8A8;
  --color-primary-glow:      rgba(112, 52, 8, 0.15);

  /* ── Accent ── */
  --color-accent:            #C4823A;
  --color-accent-hover:      #B06820;
  --color-accent-active:     #9A5818;
  --color-accent-light:      rgba(196, 130, 58, 0.1);
  --color-accent-subtle:     #FDF4E8;
  --color-accent-border:     #EAD0A0;
  --color-accent-glow:       rgba(196, 130, 58, 0.12);

  /* ── Fundos ── */
  --color-bg:                #F5F0E8;
  --color-surface:           #FAF7F3;
  --color-surface-2:         #EDE5D8;
  --color-surface-3:         #E2D6C4;
  --color-surface-4:         #D7BC91;

  /* ── Texto ── */
  --color-text-primary:      #191919;
  --color-text-secondary:    #3A2A1A;
  --color-text-tertiary:     #5A4030;
  --color-text-muted:        rgba(25, 25, 25, 0.45);
  --color-text-muted3:       rgba(25, 25, 25, 0.22);
  --color-text-inverse:      #FFFFFF;
  --color-text-on-primary:   #FFFFFF;
  --color-text-on-accent:    #FFFFFF;

  /* ── Bordas ── */
  --color-border:            rgba(112, 52, 8, 0.09);
  --color-border-strong:     rgba(112, 52, 8, 0.18);
  --color-border-subtle:     rgba(112, 52, 8, 0.05);
  --color-border-hover:      rgba(112, 52, 8, 0.2);

  /* ── Sidebar ── */
  --color-sidebar-bg:        #EDE6DB;
  --color-sidebar-active:    #703408;
  --color-sidebar-active-bg: rgba(112, 52, 8, 0.10);
  --color-sidebar-text:      #4A3020;
  --color-sidebar-text-muted:rgba(25, 25, 25, 0.32);
  --color-sidebar-border:    #DDD0C0;
  --color-sidebar-hover-bg:  rgba(112, 52, 8, 0.05);
  --color-sidebar-icon:      #8A7060;
  --color-sidebar-divider:   rgba(112, 52, 8, 0.08);

  /* ── Cards ── */
  --color-card-bg:           #FAF7F3;
  --color-card-border:       rgba(112, 52, 8, 0.07);

  /* ── Inputs ── */
  --color-input-bg:          #FAF7F3;
  --color-input-border:      rgba(112, 52, 8, 0.14);
  --color-input-border-hover:rgba(112, 52, 8, 0.25);
  --color-input-focus:       rgba(112, 52, 8, 0.22);
  --color-input-placeholder: #A08060;

  /* ── Botões ── */
  --color-btn-text:          #FFFFFF;

  /* ── Status ── */
  --color-success:           #2D6A4F;
  --color-success-bg:        rgba(45, 106, 79, 0.08);
  --color-success-border:    #B8DFC8;
  --color-warning:           #C4823A;
  --color-warning-bg:        rgba(196, 130, 58, 0.08);
  --color-warning-border:    #EAD0A0;
  --color-error:             #A02828;
  --color-error-bg:          rgba(160, 40, 40, 0.08);
  --color-error-border:      #F0B8B8;
  --color-info:              #1A4A6B;
  --color-info-bg:           rgba(26, 74, 107, 0.08);
  --color-info-border:       #B8CDE0;

  /* ── Gradientes ── */
  --gradient-primary: linear-gradient(135deg, #703408 0%, #8D3D02 55%, #C27D4A 100%);
  --gradient-accent:  linear-gradient(135deg, #C4823A 0%, #E0A050 100%);

  /* ── Sombras ── */
  --shadow-xs:    0 1px 2px rgba(112, 52, 8, 0.06);
  --shadow-sm:    0 1px 4px rgba(112, 52, 8, 0.08), 0 1px 2px rgba(112, 52, 8, 0.06);
  --shadow-md:    0 4px 12px rgba(112, 52, 8, 0.10), 0 2px 4px rgba(112, 52, 8, 0.06);
  --shadow-lg:    0 8px 24px rgba(112, 52, 8, 0.12), 0 4px 8px rgba(112, 52, 8, 0.08);
  --shadow-focus: 0 0 0 3px rgba(112, 52, 8, 0.20);

  /* ══ ALIASES — compatibilidade com código existente ══ */
  --primary:          var(--color-primary);
  --primary-hover:    var(--color-primary-hover);
  --primary-dark:     var(--color-primary-active);
  --primary-light:    var(--color-primary-light);
  --primary-lighter:  rgba(112, 52, 8, 0.04);
  --primary-glow:     var(--color-primary-glow);
  --secondary:        var(--color-accent);
  --secondary-hover:  var(--color-accent-hover);
  --secondary-light:  var(--color-accent-light);
  --secondary-glow:   var(--color-accent-glow);
  --accent:           #D7BC91;
  --accent-light:     rgba(215, 188, 145, 0.3);
  --bg:               var(--color-bg);
  --surface:          var(--color-surface);
  --surface2:         var(--color-surface-2);
  --surface3:         var(--color-surface-3);
  --surface4:         var(--color-surface-4);
  --text:             var(--color-text-primary);
  --text-secondary:   var(--color-text-secondary);
  --text-muted:       var(--color-text-tertiary);
  --text-muted2:      var(--color-text-muted);
  --text-muted3:      var(--color-text-muted3);
  --border:           var(--color-border);
  --border2:          var(--color-border-strong);
  --border3:          rgba(112, 52, 8, 0.28);
  --border-hover:     var(--color-border-hover);
  --card-bg:          var(--color-card-bg);
  --card-border:      var(--color-card-border);
  --card-shadow:      var(--shadow-sm);
  --card-shadow-hover:var(--shadow-md);
  --sidebar-bg:       var(--color-sidebar-bg);
  --sidebar-border:   #DDD0C0;
  --sidebar-text:     var(--color-sidebar-text);
  --sidebar-text-active: var(--color-sidebar-active);
  --sidebar-active-bg:var(--color-sidebar-active-bg);
  --sidebar-hover-bg: var(--color-sidebar-hover-bg);
  --sidebar-group-label: var(--color-sidebar-text-muted);
  --sidebar-icon:     var(--color-sidebar-icon);
  --sidebar-icon-active: var(--color-sidebar-active);
  --sidebar-divider:  var(--color-sidebar-divider);
  --btn-gradient:     var(--gradient-primary);
  --btn-gradient-hover: linear-gradient(135deg, #5A2806 0%, #703408 50%, #B06C3A 100%);
  --btn-glow:         rgba(112, 52, 8, 0.22);
  --btn-text:         var(--color-btn-text);
  --input-bg:         var(--color-input-bg);
  --input-border:     var(--color-input-border);
  --input-border-hover: var(--color-input-border-hover);
  --input-focus:      var(--color-input-focus);
  --input-placeholder:var(--color-input-placeholder);
  --scrollbar:        rgba(112, 52, 8, 0.12);
  --scrollbar-hover:  rgba(112, 52, 8, 0.24);
  --success:          var(--color-success);
  --success-light:    var(--color-success-bg);
  --success-bg:       var(--color-success-bg);
  --warning:          var(--color-warning);
  --warning-light:    var(--color-warning-bg);
  --warning-bg:       var(--color-warning-bg);
  --danger:           var(--color-error);
  --danger-light:     var(--color-error-bg);
  --danger-bg:        var(--color-error-bg);
  --info:             var(--color-info);
  --info-bg:          var(--color-info-bg);
  --bg-deep:          var(--color-bg);
  --bg-primary:       var(--color-surface);
  --bg-card:          var(--color-card-bg);
  --bg-card-hover:    var(--color-surface-2);
  --bg-input:         var(--color-input-bg);
  --bg-subtle:        var(--color-surface-2);
  --glass-blur:       blur(0px);
  --glass-border:     rgba(112, 52, 8, 0.08);
  --glass-border-hover: rgba(112, 52, 8, 0.15);
  --glass-highlight:  rgba(112, 52, 8, 0.03);
  --shadow-glow:      var(--shadow-sm);
  --shadow-neu:       0 1px 3px rgba(25, 25, 25, 0.06), 0 8px 24px rgba(25, 25, 25, 0.04);
}

/* ─────────────────────────────────────────
   CORES — TEMA ESCURO
───────────────────────────────────────── */
:root[data-theme="dark"] {

  /* ── Primária ── */
  --color-primary:           #D08848;
  --color-primary-hover:     #E09858;
  --color-primary-active:    #EAA868;
  --color-primary-light:     rgba(208, 136, 72, 0.15);
  --color-primary-subtle:    rgba(208, 136, 72, 0.15);
  --color-primary-border:    rgba(208, 136, 72, 0.30);
  --color-primary-glow:      rgba(208, 136, 72, 0.25);

  /* ── Accent ── */
  --color-accent:            #EEB858;
  --color-accent-hover:      #F5C868;
  --color-accent-active:     #FAD878;
  --color-accent-light:      rgba(238, 184, 88, 0.12);
  --color-accent-subtle:     rgba(238, 184, 88, 0.15);
  --color-accent-border:     rgba(238, 184, 88, 0.30);
  --color-accent-glow:       rgba(238, 184, 88, 0.15);

  /* ── Fundos ── */
  --color-bg:                #1A1A18;
  --color-surface:           #242422;
  --color-surface-2:         #2E2E2C;
  --color-surface-3:         #383836;
  --color-surface-4:         #424240;

  /* ── Texto ── */
  --color-text-primary:      #F0EAE0;
  --color-text-secondary:    #D4CAB8;
  --color-text-tertiary:     #A09080;
  --color-text-muted:        rgba(240, 237, 230, 0.35);
  --color-text-muted3:       rgba(240, 237, 230, 0.2);
  --color-text-inverse:      #0F0A04;
  --color-text-on-primary:   #1A1A18;
  --color-text-on-accent:    #1A1A18;

  /* ── Bordas ── */
  --color-border:            rgba(255, 200, 120, 0.14);
  --color-border-strong:     rgba(255, 200, 120, 0.28);
  --color-border-subtle:     rgba(255, 200, 120, 0.07);
  --color-border-hover:      rgba(255, 200, 120, 0.2);

  /* ── Sidebar ── */
  --color-sidebar-bg:        #222220;
  --color-sidebar-active:    #D08848;
  --color-sidebar-active-bg: rgba(208, 136, 72, 0.15);
  --color-sidebar-text:      #D4CAB8;
  --color-sidebar-text-muted:#888078;
  --color-sidebar-border:    rgba(255, 200, 120, 0.12);
  --color-sidebar-hover-bg:  rgba(208, 136, 72, 0.1);
  --color-sidebar-icon:      #908070;
  --color-sidebar-divider:   rgba(255, 200, 120, 0.08);

  /* ── Cards ── */
  --color-card-bg:           #242422;
  --color-card-border:       rgba(255, 200, 120, 0.1);

  /* ── Inputs ── */
  --color-input-bg:          #2E2E2C;
  --color-input-border:      rgba(255, 200, 120, 0.15);
  --color-input-border-hover:rgba(255, 200, 120, 0.3);
  --color-input-focus:       rgba(208, 136, 72, 0.25);
  --color-input-placeholder: #888078;

  /* ── Botões ── */
  --color-btn-text:          #1A1008;

  /* ── Status ── */
  --color-success:           #4A9A6A;
  --color-success-bg:        rgba(74, 154, 106, 0.15);
  --color-success-border:    rgba(74, 154, 106, 0.30);
  --color-warning:           #EEB858;
  --color-warning-bg:        rgba(238, 184, 88, 0.15);
  --color-warning-border:    rgba(238, 184, 88, 0.30);
  --color-error:             #D05858;
  --color-error-bg:          rgba(208, 88, 88, 0.15);
  --color-error-border:      rgba(208, 88, 88, 0.30);
  --color-info:              #4A88C8;
  --color-info-bg:           rgba(74, 136, 200, 0.15);
  --color-info-border:       rgba(74, 136, 200, 0.30);

  /* ── Gradientes ── */
  --gradient-primary: linear-gradient(135deg, #A05828 0%, #C4783A 55%, #E8A848 100%);
  --gradient-accent:  linear-gradient(135deg, #E8A848 0%, #F5C860 100%);

  /* ── Sombras ── */
  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-focus: 0 0 0 3px rgba(208, 136, 72, 0.35);

  /* ══ ALIASES — compatibilidade com código existente ══ */
  --primary:          var(--color-primary);
  --primary-hover:    var(--color-primary-hover);
  --primary-dark:     #A05828;
  --primary-light:    var(--color-primary-light);
  --primary-lighter:  rgba(196, 120, 58, 0.08);
  --primary-glow:     var(--color-primary-glow);
  --secondary:        var(--color-accent);
  --secondary-hover:  var(--color-accent-hover);
  --secondary-light:  var(--color-accent-light);
  --secondary-glow:   var(--color-accent-glow);
  --accent:           #F5D080;
  --accent-light:     rgba(245, 208, 128, 0.15);
  --bg:               var(--color-bg);
  --surface:          var(--color-surface);
  --surface2:         var(--color-surface-2);
  --surface3:         var(--color-surface-3);
  --surface4:         var(--color-surface-4);
  --text:             var(--color-text-primary);
  --text-secondary:   var(--color-text-secondary);
  --text-muted:       var(--color-text-tertiary);
  --text-muted2:      var(--color-text-muted);
  --text-muted3:      var(--color-text-muted3);
  --border:           var(--color-border);
  --border2:          var(--color-border-strong);
  --border3:          rgba(255, 200, 120, 0.35);
  --border-hover:     var(--color-border-hover);
  --card-bg:          var(--color-card-bg);
  --card-border:      var(--color-card-border);
  --card-shadow:      var(--shadow-sm);
  --card-shadow-hover:var(--shadow-md);
  --sidebar-bg:       var(--color-sidebar-bg);
  --sidebar-border:   var(--color-sidebar-border);
  --sidebar-text:     var(--color-sidebar-text);
  --sidebar-text-active: var(--color-sidebar-active);
  --sidebar-active-bg:var(--color-sidebar-active-bg);
  --sidebar-hover-bg: var(--color-sidebar-hover-bg);
  --sidebar-group-label: var(--color-sidebar-text-muted);
  --sidebar-icon:     var(--color-sidebar-icon);
  --sidebar-icon-active: var(--color-sidebar-active);
  --sidebar-divider:  var(--color-sidebar-divider);
  --btn-gradient:     var(--gradient-primary);
  --btn-gradient-hover: linear-gradient(135deg, #8A4820 0%, #A05828 50%, #D09040 100%);
  --btn-glow:         rgba(196, 120, 58, 0.3);
  --btn-text:         var(--color-btn-text);
  --input-bg:         var(--color-input-bg);
  --input-border:     var(--color-input-border);
  --input-border-hover: var(--color-input-border-hover);
  --input-focus:      var(--color-input-focus);
  --input-placeholder:var(--color-input-placeholder);
  --scrollbar:        rgba(255, 200, 120, 0.15);
  --scrollbar-hover:  rgba(255, 200, 120, 0.3);
  --success:          var(--color-success);
  --success-light:    var(--color-success-bg);
  --success-bg:       var(--color-success-bg);
  --warning:          var(--color-warning);
  --warning-light:    var(--color-warning-bg);
  --warning-bg:       var(--color-warning-bg);
  --danger:           var(--color-error);
  --danger-light:     var(--color-error-bg);
  --danger-bg:        var(--color-error-bg);
  --info:             var(--color-info);
  --info-bg:          var(--color-info-bg);
  --bg-deep:          var(--color-bg);
  --bg-primary:       var(--color-surface);
  --bg-card:          var(--color-card-bg);
  --bg-card-hover:    var(--color-surface-2);
  --bg-input:         var(--color-input-bg);
  --bg-subtle:        rgba(255, 200, 120, 0.04);
  --glass-blur:       blur(12px);
  --glass-border:     rgba(255, 200, 120, 0.08);
  --glass-border-hover: rgba(255, 200, 120, 0.16);
  --glass-highlight:  rgba(255, 200, 120, 0.04);
  --shadow-glow:      0 0 12px rgba(196, 120, 58, 0.1);
  --shadow-neu:       0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────
   TRANSIÇÕES GLOBAIS PARA TROCA DE TEMA
───────────────────────────────────────── */
*, *::before, *::after {
  transition:
    background-color 0.20s ease,
    border-color     0.20s ease,
    color            0.15s ease,
    box-shadow       0.20s ease;
}
/* Excluir animações e scroll da transição */
[class*="spinner"], [class*="loading"], [class*="recording"],
.row-scroll, .row-scroll *, .bnav-fab-slot,
canvas, video, img, svg {
  transition: none !important;
}