/**
 * Design tokens alinhados ao flight-scheduler (Gest-X).
 * Variáveis legadas (--primary-color, --bg-light, etc.) mapeiam para a marca.
 */

:root {
  --brand-primary: #111520;
  --brand-primary-mid: #1a2332;
  --brand-primary-deep: #0b0f17;
  --brand-primary-hover: #0b0f17;
  --brand-accent: #c89e1b;
  --brand-accent-text: #171717;

  /* Escala da marca (tints/shades via color-mix) — base = accent / theme */
  --theme-color: var(--brand-accent);
  --brand: var(--theme-color);
  /* 700–950: tons mais escuros; 950 = mais escuro (convenção Tailwind) */
  --brand-700: color-mix(in oklab, var(--brand) 85%, #000);
  --brand-800: color-mix(in oklab, var(--brand) 70%, #000);
  --brand-950: color-mix(in oklab, var(--brand) 45%, #000);
  --brand-600: color-mix(in oklab, var(--brand) 100%, transparent);
  --brand-500: var(--brand);
  --brand-300: color-mix(in oklab, var(--brand) 55%, #fff);
  --brand-200: color-mix(in oklab, var(--brand) 35%, #fff);
  --brand-100: color-mix(in oklab, var(--brand) 20%, #fff);
  --brand-50: color-mix(in oklab, var(--brand) 10%, #fff);

  /* Botão de ação primária — superfície clara + texto escuro (também no dark) */
  --brand-action-surface-bg: color-mix(in oklab, var(--brand) 20%, #fff);
  --brand-action-surface-border: color-mix(in oklab, var(--brand) 55%, #fff);
  --brand-action-surface-text: color-mix(in oklab, var(--brand) 70%, #000);
  --brand-action-surface-bg-hover: color-mix(in oklab, var(--brand) 35%, #fff);
  --brand-action-surface-text-hover: color-mix(in oklab, var(--brand) 45%, #000);
  --brand-action-bg: var(--brand-action-surface-bg);
  --brand-action-border: var(--brand-action-surface-border);
  --brand-action-text: var(--brand-action-surface-text);
  --brand-action-bg-hover: var(--brand-action-surface-bg-hover);
  --brand-action-border-hover: var(--brand-500);
  --brand-action-text-hover: var(--brand-action-surface-text-hover);

  --surface-background: #f4f6f9;
  --surface-card: #ffffff;
  --surface-input: #ffffff;

  --status-danger: #d65454;
  --status-success: #2bae66;
  --status-warning: #c89e1b;

  /* Legado modern.css / dark-theme / AdminLTE overrides */
  --primary-color: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --secondary-color: #393a3e;
  --accent-color: var(--brand-accent);
  --text-primary: #171717;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --bg-light: var(--surface-background);
  --bg-white: var(--surface-card);
  --bg-dark: #f8f9fa;

  /* Botões secundários de toolbar (Limpar, filtros, export) — mesmo visual light/dark */
  --btn-toolbar-secondary-bg: var(--surface-card);
  --btn-toolbar-secondary-border: var(--border-color);
  --btn-toolbar-secondary-text: var(--text-primary);
  --btn-toolbar-secondary-bg-hover: color-mix(in srgb, var(--brand-primary-mid) 8%, var(--surface-card));
  --btn-toolbar-secondary-border-hover: var(--brand-primary-mid);
  --btn-toolbar-secondary-text-hover: var(--brand-primary-mid);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --radius-sm: 4px;
  --transition: all 0.3s ease;

  /* Login / superfícies semânticas */
  --login-page-bg: var(--surface-background);
  --login-card-bg: var(--surface-card);
  --login-border: var(--border-color);

  /* ============================================================
   * Navbar / Sidebar tokens — refactor navbar-redesign 2026-05
   * Permitem que header + sidebar acompanhem o tema (Padrão B).
   * Tema claro: navbar branca, sidebar off-white.
   * Tema escuro: overrides em dark-theme.css.
   * ============================================================ */
  --brand-accent-soft: #e4bf4e;
  --brand-mark-bg: var(--brand-accent);
  --brand-mark-text: #ffffff;

  --nav-bg:           #ffffff;
  --nav-bg-soft:      #f8fafc;
  --nav-border:       #e5e7eb;
  --nav-text:         #111827;
  --nav-text-soft:    #6b7280;
  --nav-text-muted:   #9ca3af;
  --nav-hover:        #f3f4f6;
  --nav-active-bg:    rgba(200, 158, 27, 0.10);
  --nav-active-text:  #8a6a10;
  --nav-flyout-bg:    var(--nav-bg);
  --nav-flyout-border: var(--nav-border);
  --nav-flyout-text:  var(--nav-text);
  --nav-flyout-hover: var(--nav-hover);
  --nav-danger-bg:    rgba(214, 84, 84, 0.10);
}

[data-theme="dark"] {
  --brand-primary: #111520;
  --brand-primary-mid: #141b2a;
  --brand-primary-deep: #0b0f17;
  --brand-primary-hover: #1f2937;
  --brand-accent: #c89e1b;
  --brand-accent-text: #0b0f17;

  --theme-color: var(--brand-accent);
  --brand: var(--theme-color);
  /* 700–950: tons mais escuros; 950 = mais escuro (convenção Tailwind) */
  --brand-700: color-mix(in oklab, var(--brand) 85%, #000);
  --brand-800: color-mix(in oklab, var(--brand) 70%, #000);
  --brand-950: color-mix(in oklab, var(--brand) 45%, #000);
  --brand-600: color-mix(in oklab, var(--brand) 100%, transparent);
  --brand-500: var(--brand);
  --brand-300: color-mix(in oklab, var(--brand) 45%, var(--surface-card));
  --brand-200: color-mix(in oklab, var(--brand) 28%, var(--surface-card));
  --brand-100: color-mix(in oklab, var(--brand) 16%, var(--surface-card));
  --brand-50: color-mix(in oklab, var(--brand) 8%, var(--surface-card));

  /* Mesma aparência do tema claro (fundo claro legível sobre cards escuros) */
  --brand-action-bg: var(--brand-action-surface-bg);
  --brand-action-border: var(--brand-action-surface-border);
  --brand-action-text: var(--brand-action-surface-text);
  --brand-action-bg-hover: var(--brand-action-surface-bg-hover);
  --brand-action-border-hover: var(--brand-500);
  --brand-action-text-hover: var(--brand-action-surface-text-hover);

  --surface-background: #0b0f17;
  --surface-card: #141b2a;
  --surface-input: #0b0f17;

  --primary-color: #8b9fd4;
  --primary-hover: #a8b8e0;
  --secondary-color: #374151;
  --accent-color: var(--brand-accent);
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --border-color: #1f2937;
  --bg-light: var(--surface-background);
  --bg-white: var(--surface-card);
  --bg-dark: var(--surface-input);

  --btn-toolbar-secondary-bg: var(--surface-card);
  --btn-toolbar-secondary-border: var(--border-color);
  --btn-toolbar-secondary-text: var(--text-primary);
  --btn-toolbar-secondary-bg-hover: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-card));
  --btn-toolbar-secondary-border-hover: var(--brand-accent);
  --btn-toolbar-secondary-text-hover: var(--brand-accent);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  --login-page-bg: var(--surface-background);
  --login-card-bg: var(--surface-card);
  --login-border: var(--border-color);

  /* Navbar/Sidebar — overrides do tema escuro */
  --brand-mark-text: #0b0f17;

  --nav-bg:           var(--brand-primary);
  --nav-bg-soft:      var(--brand-primary);
  --nav-border:       rgba(255, 255, 255, 0.06);
  --nav-text:         #ffffff;
  --nav-text-soft:    rgba(255, 255, 255, 0.78);
  --nav-text-muted:   rgba(255, 255, 255, 0.5);
  --nav-hover:        rgba(255, 255, 255, 0.08);
  --nav-active-bg:    rgba(200, 158, 27, 0.14);
  --nav-active-text:  var(--brand-accent-soft);
  --nav-flyout-bg:    var(--surface-card);
  --nav-flyout-border: var(--border-color);
  --nav-flyout-text:  var(--text-primary);
  --nav-flyout-hover: var(--surface-background);
  --nav-danger-bg:    rgba(214, 84, 84, 0.12);
}