/* ============================================
   ACCESSMANAGER DESIGN SYSTEM — Variables (Tokens)
   v1.0.0
   ============================================ */

:root {
  /* ── ArandU Design System (ADS) — cores CLARO (§5). Chumbo + acento magenta; sem azul/roxo. ── */
  /* Ação primária = chumbo (--ctx-interactive-primary). NUNCA azul. */
  --accessmanager-primary: #292929;
  --accessmanager-primary-hover: #7E7E7E;
  --accessmanager-primary-light: rgba(38, 39, 43, 0.08); /* --ctx-interactive-secondary */

  /* ── Cores de Superfície ── */
  --accessmanager-bg: #F4F4F5;          /* --ctx-layout-body */
  --accessmanager-surface: #FFFFFF;     /* --ctx-layout-surface */
  --accessmanager-input-bg: #FFFFFF;
  --accessmanager-input-bg-hover: #F4F4F5;

  /* ── Texto ── */
  --accessmanager-text: #18181B;                          /* --ctx-content-title (valores/títulos) */
  --accessmanager-text-secondary: #51525C;                /* --ctx-content-base ≈ rótulos/meta cinza (valor é quase-preto) */
  --accessmanager-text-placeholder: #A1A1AA;
  --accessmanager-text-on-primary: #FFFFFF;

  /* ── Bordas e Separadores ── */
  --accessmanager-border: #E4E4E7;       /* --ctx-layout-border */
  --accessmanager-border-light: #E4E4E7;

  /* ── Status (cor SEMPRE comunica status/severidade — §6) ── */
  --accessmanager-success-bg: #E6FCD7;   /* success-100 */
  --accessmanager-success-text: #1B9026; /* success-700 */
  --accessmanager-warning-bg: #FEF0CE;   /* warning-100 */
  --accessmanager-warning-text: #B34F07; /* warning-700 */
  --accessmanager-error: #AF1421;        /* danger-700 */
  --accessmanager-error-bg: #FEE5D4;     /* danger-100 */

  /* ── Tags / Badges (categoria = neutro cinza, NUNCA cor de status) ── */
  --accessmanager-tag-bg: #E4E4E7;       /* gray-200 */
  --accessmanager-tag-text: #3F3F46;     /* gray-700 */

  /* ── Acento (raro — promoção/destaque, NUNCA status) ── */
  --accessmanager-highlight: #CF0489;    /* --ctx-highlight-promote */

  /* ── Tabs ── */
  --accessmanager-tab-inactive-bg: #F4F4F5;
  --accessmanager-tab-inactive-text: rgba(24, 24, 27, 0.72);
  --accessmanager-tab-hover-bg: rgba(38, 39, 43, 0.08);
  --accessmanager-tab-hover-text: var(--accessmanager-text);
  --accessmanager-tab-active-bg: var(--accessmanager-primary);
  --accessmanager-tab-active-text: #FFFFFF;

  /* ── Notificações ── */
  --accessmanager-notification-unread-bg: rgba(38, 39, 43, 0.05);

  /* ── Hover de Linhas ── */
  --accessmanager-row-hover: #FAFAFA;

  /* ── Border Radius (ADS: 8 pequeno / 16 card / pill só tag·avatar) ── */
  --accessmanager-radius-sm: 8px;
  --accessmanager-radius-md: 8px;
  --accessmanager-radius-lg: 16px;
  --accessmanager-radius-xl: 16px;
  --accessmanager-radius-2xl: 16px;
  --accessmanager-radius-pill: 999px;

  /* ── Espaçamento ── */
  --accessmanager-space-xs: 4px;
  --accessmanager-space-sm: 8px;
  --accessmanager-space-md: 12px; /* Reduzido de 16px */
  --accessmanager-space-lg: 16px; /* Reduzido de 24px */
  --accessmanager-space-xl: 24px; /* Reduzido de 32px */
  --accessmanager-space-2xl: 32px; /* Reduzido de 48px */

  @media (min-width: 768px) {
    --accessmanager-space-md: 14px; /* Antes 16px */
    --accessmanager-space-lg: 20px; /* Antes 24px */
    --accessmanager-space-xl: 28px; /* Antes 32px */
    --accessmanager-space-2xl: 40px; /* Antes 48px */
  }

  /* ── Breakpoints ── */
  --accessmanager-breakpoint-sm: 576px;
  --accessmanager-breakpoint-md: 768px;
  --accessmanager-breakpoint-lg: 992px;
  --accessmanager-breakpoint-xl: 1200px;

  /* ── Tipografia ── */
  --accessmanager-font-family: 'Inter', sans-serif;
  --accessmanager-font-size-xs: 11px;
  --accessmanager-font-size-sm: 13px;
  --accessmanager-font-size-base: 14px; /* Reduzido de 16px */
  --accessmanager-font-size-md: 16px;   /* Reduzido de 18px */
  --accessmanager-font-size-lg: 18px;   /* Reduzido de 22px */
  --accessmanager-font-size-xl: 22px;   /* Reduzido de 28px */
  --accessmanager-font-size-2xl: 28px;  /* Reduzido de 36px */
  
  @media (min-width: 768px) {
    --accessmanager-font-size-xs: 11px;
    --accessmanager-font-size-sm: 13px;
    --accessmanager-font-size-base: 14px;
    --accessmanager-font-size-md: 16px;
    --accessmanager-font-size-lg: 18px;
    --accessmanager-font-size-xl: 22px;
    --accessmanager-font-size-2xl: 28px;
  }

  @media (min-width: 1200px) {
    --accessmanager-font-size-lg: 22px;
    --accessmanager-font-size-xl: 28px;
    --accessmanager-font-size-2xl: 36px;
  }

  --accessmanager-font-weight-normal: 400;
  --accessmanager-font-weight-medium: 500;
  --accessmanager-font-weight-bold: 600; /* ADS: "negrito" = 600, NUNCA 700 */

  /* ── Sombras ── */
  --accessmanager-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --accessmanager-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --accessmanager-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --accessmanager-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
  --accessmanager-overlay-bg: rgba(0, 0, 0, 0.55);

  /* ── Transições ── */
  --accessmanager-transition-fast: 0.15s ease-in-out;
  --accessmanager-transition-base: 0.3s ease-in-out;

  /* ── Sidebar ── */
  --accessmanager-sidebar-width: 280px;
  --accessmanager-sidebar-collapsed: 90px;

/* Breakpoint para comportamento responsivo */
--accessmanager-breakpoint-lg: 992px;
--accessmanager-breakpoint-md: 768px;
--accessmanager-breakpoint-sm: 576px;
}

/* ── Tema Escuro (Dark Mode) ── */
[data-accessmanager-theme="dark"] {
  /* ── ADS dark (ctx-* trocam; §5/§9) ── */
  --accessmanager-bg: #18181B;          /* --ctx-layout-body */
  --accessmanager-surface: #26272B;     /* --ctx-layout-surface */
  --accessmanager-input-bg: #26272B;
  --accessmanager-input-bg-hover: #2E2E33;

  /* Texto */
  --accessmanager-text: #FFFFFF;             /* --ctx-content-title (valores/títulos) */
  --accessmanager-text-secondary: #A1A1AA;   /* rótulos/meta — claramente mais claros que o valor */
  --accessmanager-text-placeholder: #71717A;

  /* Bordas */
  --accessmanager-border: #3F3F46;      /* --ctx-layout-border */
  --accessmanager-border-light: #3F3F46;

  /* Primária no dark = BRANCO (--ctx-interactive-primary); texto escuro em cima */
  --accessmanager-primary: #FFFFFF;
  --accessmanager-primary-hover: #D1D1D6;
  --accessmanager-primary-light: rgba(244, 244, 245, 0.16); /* --ctx-interactive-secondary */
  --accessmanager-text-on-primary: #18181B;

  /* Botões secundários no dark */
  --accessmanager-btn-secondary-bg: rgba(244, 244, 245, 0.16);
  --accessmanager-btn-secondary-text: #FFFFFF;
  --accessmanager-btn-secondary-hover: rgba(244, 244, 245, 0.24);

  /* Status — variantes dark EXPLÍCITAS (§9) */
  --accessmanager-success-bg: #0A6021;   /* success-900 */
  --accessmanager-success-text: #C7F9B0; /* success-200 */
  --accessmanager-warning-bg: #772802;   /* warning-900 */
  --accessmanager-warning-text: #FEDE9E; /* warning-200 */
  --accessmanager-error-bg: #750722;     /* danger-900 */
  --accessmanager-error: #FDC5A9;        /* danger-200 */

  /* Tags / Badges (default neutro) */
  --accessmanager-tag-bg: #26272B;       /* gray-800 */
  --accessmanager-tag-text: #D1D1D6;     /* gray-300 */

  /* Acento */
  --accessmanager-highlight: #FA98BB;    /* accent-200 (dark) */

  /* Tabs */
  --accessmanager-tab-inactive-bg: #26272B;
  --accessmanager-tab-inactive-text: rgba(255, 255, 255, 0.72);
  --accessmanager-tab-hover-bg: rgba(244, 244, 245, 0.16);
  --accessmanager-tab-hover-text: #FFFFFF;
  --accessmanager-tab-active-bg: var(--accessmanager-primary);
  --accessmanager-tab-active-text: var(--accessmanager-text-on-primary);

  /* Notificações */
  --accessmanager-notification-unread-bg: rgba(255, 255, 255, 0.06);

  /* Hover de linhas */
  --accessmanager-row-hover: rgba(255, 255, 255, 0.04);

  /* Sombras mais intensas */
  --accessmanager-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --accessmanager-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --accessmanager-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --accessmanager-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7);
  --accessmanager-overlay-bg: rgba(0, 0, 0, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADS — tokens crus portados de colors_and_type.css (usados DIRETO nos
   componentes redesenhados para bater exatamente com os mockups ArandU).
   As famílias de status (base-*-100 bg / base-*-700 texto) e o neutro
   (gray-200/700) são remapeados no dark (§9) → o markup do mockup fica
   theme-aware sozinho.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --base-brand-100:#F5F5F5; --base-brand-200:#E5E5E5; --base-brand-300:#D6D6D6;
  --base-brand-400:#A3A3A3; --base-brand-500:#737373; --base-brand-600:#525252;
  --base-brand-700:#424242; --base-brand-800:#292929; --base-brand-900:#141414;

  --base-accent-100:#FCCBD7; --base-accent-200:#FA98BB; --base-accent-500:#CF0489;
  --base-accent-700:#95027F; --base-accent-900:#5E0063;

  --base-success-100:#E6FCD7; --base-success-200:#C7F9B0; --base-success-300:#9EEE86;
  --base-success-500:#40C936; --base-success-600:#27AC29; --base-success-700:#1B9026;
  --base-success-800:#117423; --base-success-900:#0A6021;

  --base-warning-100:#FEF0CE; --base-warning-200:#FEDE9E; --base-warning-300:#FDC66D;
  --base-warning-700:#B34F07; --base-warning-800:#903804; --base-warning-900:#772802;

  --base-danger-100:#FEE5D4; --base-danger-200:#FDC5A9; --base-danger-300:#FB9D7E;
  --base-danger-700:#AF1421; --base-danger-800:#8D0D21; --base-danger-900:#750722;

  --base-gray-100:#F4F4F5; --base-gray-200:#E4E4E7; --base-gray-300:#D1D1D6;
  --base-gray-400:#A0A0AB; --base-gray-500:#70707B; --base-gray-600:#51525C;
  --base-gray-700:#3F3F46; --base-gray-800:#26272B; --base-gray-900:#18181B;

  --ctx-content-title:#18181B;
  --ctx-content-base:rgba(24,24,27,0.72);
  --ctx-content-placeholder:rgba(38,39,43,0.64);
  --ctx-content-primary:#292929;
  --ctx-content-primary-alternative:#FFFFFF;
  --ctx-content-titleAlternative:#FFFFFF;

  --ctx-layout-body:#F4F4F5;
  --ctx-layout-surface:#FFFFFF;
  --ctx-layout-spotlight:#FAFAFA;
  --ctx-layout-overlay:rgba(0,0,0,0.55);
  --ctx-layout-border:#E4E4E7;

  --ctx-interactive-primary:#292929;
  --ctx-interactive-primary-hover:#7E7E7E;
  --ctx-interactive-primaryHover:#7E7E7E;
  --ctx-interactive-secondary:rgba(38,39,43,0.08);
  --ctx-interactive-secondary-hover:rgba(112,112,123,0.16);
  --ctx-interactive-secondaryHover:rgba(112,112,123,0.16);
  --ctx-interactive-destructive:#D11E1D;
  --ctx-interactive-destructive-hover:#F43A29;
  --ctx-interactive-destructiveHover:#F43A29;

  --ctx-highlight-promote:#CF0489;
  --ctx-highlight-focus:#CF0489;
  --ctx-highlight-ringFocusBorder:#292929;

  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-level1:0 4px 8px rgba(0,0,0,0.16);
  --shadow-level2:0 8px 24px rgba(0,0,0,0.16);
  --shadow-level3:0 16px 32px rgba(0,0,0,0.08);
  --shadow-level4:0 16px 48px rgba(0,0,0,0.08);
  --font-base:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

[data-accessmanager-theme="dark"] {
  --ctx-content-title:#FFFFFF;
  --ctx-content-base:rgba(255,255,255,0.72);
  --ctx-content-placeholder:rgba(255,255,255,0.64);
  --ctx-content-primary:#FFFFFF;
  --ctx-content-primary-alternative:#292929;
  --ctx-content-titleAlternative:#292929;

  --ctx-layout-body:#18181B;
  --ctx-layout-surface:#26272B;
  --ctx-layout-spotlight:rgba(255,255,255,0.06);
  --ctx-layout-overlay:rgba(0,0,0,0.8);
  --ctx-layout-border:#3F3F46;

  --ctx-interactive-primary:#FFFFFF;
  --ctx-interactive-primary-hover:#D1D1D6;
  --ctx-interactive-primaryHover:#D1D1D6;
  --ctx-interactive-secondary:rgba(244,244,245,0.16);
  --ctx-interactive-secondary-hover:rgba(244,244,245,0.32);
  --ctx-interactive-secondaryHover:rgba(244,244,245,0.32);
  --ctx-interactive-destructive:#F43A29;
  --ctx-interactive-destructive-hover:#F8775D;
  --ctx-interactive-destructiveHover:#F8775D;

  --ctx-highlight-focus:#FA98BB;
  --ctx-highlight-ringFocusBorder:#FFFFFF;

  /* §9 — famílias de status/neutro trocam explicitamente no dark (bg↔texto) */
  --base-success-100:#0A6021; --base-success-700:#C7F9B0;
  --base-warning-100:#772802; --base-warning-700:#FEDE9E;
  --base-danger-100:#750722;  --base-danger-700:#FDC5A9;
  --base-gray-100:#26272B;    --base-gray-200:#26272B;  --base-gray-700:#D1D1D6;
  --base-brand-800:#D1D1D6;   /* gráficos/marca visíveis sobre superfície escura */
}