/* Design tokens — Massala / EMPRESA
   Paleta e tipografia alinhadas ao design system OCTI (css/tokens.css) */
:root {
  /* OCTI brand bridge */
  --octi-primary: #2E2E84;
  --octi-primary-light: #4A4AA8;
  --octi-primary-dark: #1F1F5E;
  --octi-secondary: #00D1FF;
  --octi-secondary-deep: #0693B8;
  --octi-dark: #211C2C;
  --octi-ink-900: #0F0E1F;
  --octi-ink-800: #171433;
  --octi-light: #F7F7FB;
  --octi-white: #ffffff;
  --octi-border: #E5E7EB;
  --octi-text-main: #3D3D4E;
  --octi-text-muted: #5E5E70;
  --octi-on-dark: #E8E8F6;
  --octi-on-dark-muted: #B8B8D9;

  --brand-primary: var(--octi-primary);
  --brand-accent: var(--octi-secondary);
  --color-accent-primary: var(--octi-secondary);
  --color-brand-primary: var(--octi-primary);
  --primary: var(--octi-primary);
  --accent: var(--octi-secondary);

  /* brand aliases (legado Massala → OCTI) */
  --msl-petroleo: #2E2E84;
  --msl-lima: #00D1FF;
  --msl-laranja: #4A4AA8;
  --msl-marrom: #211C2C;
  --msl-branco: #ffffff;
  --msl-cinza-3: #E5E7EB;
  --msl-cinza-5: #5E5E70;
  --msl-laranja-texto: #0693B8;
  --msl-petroleo-hover: #1F1F5E;

  /* tipografia OCTI */
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px;
  --tracking-label: .16em;
  --lh-tight: 1.2; --lh-body: 1.5;

  /* espaço, forma, movimento (OCTI radii) */
  --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;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px;
  --dur: .18s; --ease: cubic-bezier(.4, 0, .2, 1);
  --sidebar-w: 256px; --topbar-h: 64px;

  /* semantic — claro (OCTI light surfaces) */
  --surface-page: #F7F7FB;
  --surface-card: #ffffff;
  --surface-sunken: #EEEDF6;
  --surface-hover: #E8E8F6;
  --surface-brand: #2E2E84;
  --surface-brand-2: #1F1F5E;
  --surface-accent-soft: #E6FAFF;
  --surface-attention-soft: #EEEBFF;
  --text-primary: #0F0E1F;
  --text-strong: #0F0E1F;
  --text-secondary: #5E5E70;
  --text-on-brand: #E8E8F6;
  --text-on-brand-muted: #B8B8D9;
  --text-accent: #0693B8;
  --text-brand-secondary: #4A4AA8;
  --border-subtle: #E5E7EB;
  --border-control: #B8B8D9;
  --focus-ring: #00D1FF;
  --action-primary-bg: #2E2E84;
  --action-primary-fg: #ffffff;
  --action-primary-hover: #1F1F5E;
  --action-secondary-bg: #00D1FF;
  --action-secondary-fg: #0F0E1F;
  --action-secondary-hover: #0693B8;
  --status-success: #16805a; --status-success-bg: #e7f7f0;
  --status-warning: #b26a00; --status-warning-bg: #fff4dc;
  --status-danger: #c23b4a;  --status-danger-bg: #ffebed;
  --status-info: #2563a7;    --status-info-bg: #e9f3ff;
  --status-attention: #4A4AA8; --status-attention-bg: #EEEBFF;
  --chart-1: #2E2E84; --chart-2: #00D1FF; --chart-3: #4A4AA8; --chart-4: #0693B8; --chart-5: #211C2C;
  --chart-grid: #E5E7EB; --chart-axis: #5E5E70;
  --seq-0: #F7F7FB; --seq-1: #E8E8F6; --seq-2: #C8C8E8; --seq-3: #9A9AD0; --seq-4: #6B6BB8; --seq-5: #4A4AA8; --seq-6: #2E2E84; --seq-7: #1F1F5E;
  --shadow-sm: 0 1px 2px rgba(33, 28, 44, .06), 0 4px 12px rgba(33, 28, 44, .05);
  --shadow-lg: 0 30px 60px -25px rgba(31, 31, 94, .45);
  --overlay: rgba(15, 14, 31, .45);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --surface-page: #0F0E1F;
  --surface-card: #171433;
  --surface-sunken: #0B0A18;
  --surface-hover: #211C2C;
  --surface-brand: #0F0E1F;
  --surface-brand-2: #171433;
  --surface-accent-soft: #123040;
  --surface-attention-soft: #1F1F5E;
  --text-primary: #E8E8F6;
  --text-strong: #ffffff;
  --text-secondary: #B8B8D9;
  --text-on-brand: #E8E8F6;
  --text-on-brand-muted: #B8B8D9;
  --text-accent: #00D1FF;
  --text-brand-secondary: #4A4AA8;
  --border-subtle: #2A2744;
  --border-control: #5E5E70;
  --focus-ring: #00D1FF;
  --action-primary-bg: #00D1FF;
  --action-primary-fg: #0F0E1F;
  --action-primary-hover: #0693B8;
  --action-secondary-bg: transparent;
  --action-secondary-fg: #00D1FF;
  --action-secondary-hover: #1F1F5E;
  --status-success: #7ee2a0; --status-success-bg: #173823;
  --status-warning: #f5c451; --status-warning-bg: #3a2f12;
  --status-danger: #ff8a80;  --status-danger-bg: #3d1a17;
  --status-info: #8cc4ff;    --status-info-bg: #142c45;
  --status-attention: #A5A1FF; --status-attention-bg: #1F1F5E;
  --chart-1: #4A4AA8; --chart-2: #00D1FF; --chart-3: #8B8BD4; --chart-4: #0693B8; --chart-5: #E8E8F6;
  --chart-grid: #2A2744; --chart-axis: #B8B8D9;
  --seq-0: #0F0E1F; --seq-1: #171433; --seq-2: #211C2C; --seq-3: #1F1F5E; --seq-4: #2E2E84; --seq-5: #4A4AA8; --seq-6: #6B6BB8; --seq-7: #00D1FF;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 45%);
  --overlay: rgba(15, 14, 31, .72);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-page: #0F0E1F; --surface-card: #171433; --surface-sunken: #0B0A18; --surface-hover: #211C2C;
    --surface-brand: #0F0E1F; --surface-brand-2: #171433; --surface-accent-soft: #123040; --surface-attention-soft: #1F1F5E;
    --text-primary: #E8E8F6; --text-strong: #ffffff; --text-secondary: #B8B8D9; --text-on-brand: #E8E8F6; --text-on-brand-muted: #B8B8D9;
    --text-accent: #00D1FF; --text-brand-secondary: #4A4AA8;
    --border-subtle: #2A2744; --border-control: #5E5E70; --focus-ring: #00D1FF;
    --action-primary-bg: #00D1FF; --action-primary-fg: #0F0E1F; --action-primary-hover: #0693B8;
    --action-secondary-bg: transparent; --action-secondary-fg: #00D1FF; --action-secondary-hover: #1F1F5E;
    --status-success: #7ee2a0; --status-success-bg: #173823; --status-warning: #f5c451; --status-warning-bg: #3a2f12;
    --status-danger: #ff8a80; --status-danger-bg: #3d1a17; --status-info: #8cc4ff; --status-info-bg: #142c45;
    --status-attention: #A5A1FF; --status-attention-bg: #1F1F5E;
    --chart-1: #4A4AA8; --chart-2: #00D1FF; --chart-3: #8B8BD4; --chart-4: #0693B8; --chart-5: #E8E8F6;
    --chart-grid: #2A2744; --chart-axis: #B8B8D9;
    --seq-0: #0F0E1F; --seq-1: #171433; --seq-2: #211C2C; --seq-3: #1F1F5E; --seq-4: #2E2E84; --seq-5: #4A4AA8; --seq-6: #6B6BB8; --seq-7: #00D1FF;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 35%); --shadow-lg: 0 20px 40px rgb(0 0 0 / 45%); --overlay: rgba(15, 14, 31, .72);
    color-scheme: dark;
  }
}