/* ============================================
   AKME DESIGN SYSTEM 2026 V2 - AKME BRAND
   Layer 2a: Extensao corporativa
   Herda: foundation.css (OBRIGATORIO)
   Uso: Site institucional, Portal2, ECM, Gecobo,
        Marketing, Blog, Loja
   ============================================

   IMPORT ORDER:
   1. foundation.css
   2. akme-tokens.css  <-- este arquivo
   ============================================ */

:root {
  /* === AKME PRIMARY (blue scale) ===
     Azul corporativo usado em CTAs, links, accent.
     Fonte: ECM articles (ecm-home-akme-new) = blue-500/600 */
  --akme-primary-50:  #eff6ff;
  --akme-primary-100: #dbeafe;
  --akme-primary-200: #bfdbfe;
  --akme-primary-300: #93c5fd;
  --akme-primary-400: #60a5fa;
  --akme-primary-500: #3b82f6;   /* Primary */
  --akme-primary-600: #2563eb;   /* Primary hover/active */
  --akme-primary-700: #1d4ed8;
  --akme-primary-800: #1e40af;
  --akme-primary-900: #1e3a8a;
  --akme-primary-950: #172554;

  /* Atalhos semanticos */
  --akme-primary:     var(--akme-primary-500);
  --akme-primary-hover:var(--akme-primary-600);
  --akme-primary-soft: rgba(59, 130, 246, 0.1);
  --akme-primary-text: var(--akme-primary-400); /* legivel em dark bg */

  /* === AKME ACCENT (indigo - complementar ao blue) === */
  --akme-accent:      #818cf8;   /* indigo-400 */
  --akme-accent-hover:#6366f1;   /* indigo-500 */
  --akme-accent-soft: rgba(129, 140, 248, 0.1);

  /* === AKME SEMANTIC OVERRIDES ===
     Override foundation semantics se necessario.
     Por enquanto, herda foundation sem alteracao.
     Descomente para customizar:

  --f-success:      #10b981;
  --f-warning:      #f59e0b;
  --f-error:        #ef4444;
  --f-info:         #06b6d4;
  */

  /* === AKME GRADIENT === */
  --akme-gradient-hero: linear-gradient(135deg, var(--f-bg) 0%, #0f172a 50%, #172554 100%);
  --akme-gradient-card: linear-gradient(180deg, var(--f-surface) 0%, var(--f-bg) 100%);
  --akme-gradient-cta:  linear-gradient(135deg, var(--akme-primary-600) 0%, var(--akme-primary-500) 100%);

  /* === AKME GLOW EFFECTS === */
  --akme-glow-primary: 0 0 12px rgba(59, 130, 246, 0.3);
  --akme-glow-accent:  0 0 12px rgba(129, 140, 248, 0.3);

  /* === AKME SPECIFIC SURFACES ===
     Variacoes de surface com tint azul corporativo */
  --akme-surface-tint: rgba(59, 130, 246, 0.03);
}

/* === AKME COMPONENT STYLES === */

/* Buttons */
.akme-btn-primary {
  background: var(--akme-gradient-cta);
  color: white;
  border: 1px solid var(--akme-primary-500);
  padding: var(--f-space-2) var(--f-space-4);
  border-radius: var(--f-radius-lg);
  font-weight: var(--f-weight-semi);
  font-size: var(--f-text-sm);
  cursor: pointer;
  transition: all var(--f-transition-normal);
  min-height: var(--f-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
}

.akme-btn-primary:hover {
  background: var(--akme-primary-hover);
  box-shadow: var(--akme-glow-primary);
}

.akme-btn-secondary {
  background: transparent;
  color: var(--f-text);
  border: 1px solid var(--f-border);
  padding: var(--f-space-2) var(--f-space-4);
  border-radius: var(--f-radius-lg);
  font-weight: var(--f-weight-medium);
  font-size: var(--f-text-sm);
  cursor: pointer;
  transition: all var(--f-transition-normal);
  min-height: var(--f-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
}

.akme-btn-secondary:hover {
  background: var(--f-surface-hover);
  border-color: var(--f-border-strong);
}

.akme-btn-ghost {
  background: transparent;
  color: var(--akme-primary-text);
  border: none;
  padding: var(--f-space-2) var(--f-space-4);
  border-radius: var(--f-radius-lg);
  font-weight: var(--f-weight-medium);
  font-size: var(--f-text-sm);
  cursor: pointer;
  transition: all var(--f-transition-normal);
  min-height: var(--f-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
}

.akme-btn-ghost:hover {
  background: var(--akme-primary-soft);
}

/* Cards */
.akme-card {
  background: var(--f-surface);
  border: 1px solid var(--f-border-subtle);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-6);
  transition: all var(--f-transition-normal);
}

.akme-card:hover {
  border-color: var(--f-border);
  box-shadow: var(--f-shadow-md);
}

.akme-card-header {
  font-size: var(--f-text-lg);
  font-weight: var(--f-weight-semi);
  color: var(--f-text);
  margin-bottom: var(--f-space-3);
}

.akme-card-body {
  color: var(--f-text-secondary);
  font-size: var(--f-text-sm);
  line-height: var(--f-leading-relaxed);
}

/* Nav/Header */
.akme-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--f-z-sticky);
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--f-border-subtle);
  padding: 0 var(--f-space-6);
  height: 64px;
  display: flex;
  align-items: center;
}

/* Inputs */
.akme-input {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-lg);
  padding: var(--f-space-2) var(--f-space-3);
  color: var(--f-text);
  font-family: var(--f-font);
  font-size: var(--f-text-sm);
  min-height: var(--f-touch-min);
  width: 100%;
  transition: border-color var(--f-transition-normal);
}

.akme-input:focus {
  outline: none;
  border-color: var(--akme-primary);
  box-shadow: 0 0 0 2px var(--akme-primary-soft);
}

.akme-input::placeholder {
  color: var(--f-text-muted);
}

/* Badges */
.akme-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--f-space-0-5) var(--f-space-2);
  border-radius: var(--f-radius-full);
  font-size: var(--f-text-xs);
  font-weight: var(--f-weight-medium);
}

.akme-badge-primary {
  background: var(--akme-primary-soft);
  color: var(--akme-primary-text);
}

.akme-badge-success {
  background: var(--f-success-soft);
  color: var(--f-success-text);
}

.akme-badge-warning {
  background: var(--f-warning-soft);
  color: var(--f-warning-text);
}

.akme-badge-error {
  background: var(--f-error-soft);
  color: var(--f-error-text);
}

/* Tables */
.akme-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-text-sm);
}

.akme-table th {
  text-align: left;
  padding: var(--f-space-3) var(--f-space-4);
  font-size: var(--f-text-xs);
  font-weight: var(--f-weight-semi);
  color: var(--f-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--f-tracking-wide);
  border-bottom: 1px solid var(--f-border);
  background: var(--f-surface);
}

.akme-table td {
  padding: var(--f-space-3) var(--f-space-4);
  border-bottom: 1px solid var(--f-border-subtle);
  color: var(--f-text-secondary);
}

.akme-table tr:hover td {
  background: var(--f-surface);
}

/* Stats Card (usado no dashboard/home) */
.akme-stat {
  text-align: center;
}

.akme-stat-value {
  font-family: var(--f-font-mono);
  font-size: var(--f-text-3xl);
  font-weight: var(--f-weight-bold);
  color: var(--f-text);
  line-height: var(--f-leading-none);
}

.akme-stat-label {
  font-size: var(--f-text-xs);
  color: var(--f-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--f-tracking-widest);
  margin-top: var(--f-space-1);
}
