/* ============================================
   AKME DESIGN SYSTEM 2026 - V Kombai
   Sistema de Design Unificado para Plataforma Akme
   Tailwind v4 + Inter Font + Dark Mode Native
   ============================================ */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap');

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* === COLORS - Background === */
  --color-bg-base: #0f172a;           /* slate-900 */
  --color-bg-surface: #1e293b;        /* slate-800 */
  --color-bg-elevated: #334155;       /* slate-700 */
  --color-bg-hover: #475569;          /* slate-600 */
  
  /* === COLORS - Text === */
  --color-text-primary: #f8fafc;      /* slate-50 */
  --color-text-secondary: #cbd5e1;    /* slate-300 */
  --color-text-muted: #94a3b8;        /* slate-400 */
  --color-text-disabled: #64748b;     /* slate-500 */
  
  /* === COLORS - Border === */
  --color-border-default: #334155;    /* slate-700 */
  --color-border-subtle: #1e293b;     /* slate-800 */
  --color-border-accent: #475569;     /* slate-600 */
  
  /* === COLORS - Brand (Akme/Smart Navigator) === */
  --color-primary: #38bdf8;           /* sky-400 */
  --color-primary-dark: #0ea5e9;      /* sky-500 */
  --color-primary-light: #7dd3fc;     /* sky-300 */
  
  --color-accent: #a855f7;            /* purple-500 */
  --color-accent-dark: #9333ea;       /* purple-600 */
  --color-accent-light: #c084fc;      /* purple-400 */
  
  /* === COLORS - Semantic (Aviation/ICAO Standard) === */
  --color-success: #00ff00;           /* Green - Active/OK */
  --color-success-dark: #00cc00;
  --color-success-light: #33ff33;
  
  --color-warning: #ff9900;           /* Amber - Caution */
  --color-warning-dark: #cc7700;
  --color-warning-light: #ffb84d;
  
  --color-danger: #ff0000;            /* Red - Critical */
  --color-danger-dark: #cc0000;
  --color-danger-light: #ff3333;
  
  --color-info: #00d4ff;              /* Cyan - Info/Data */
  --color-info-dark: #00a8cc;
  --color-info-light: #33ddff;
  
  /* === TYPOGRAPHY === */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  
  /* Font Sizes (16px base) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* === SPACING (8px grid) === */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  
  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-xs: 0.125rem;  /* 2px */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;
  
  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  
  /* Glow Shadows */
  --shadow-glow-primary: 0 0 12px rgba(56, 189, 248, 0.4);
  --shadow-glow-success: 0 0 12px rgba(0, 255, 0, 0.4);
  --shadow-glow-warning: 0 0 12px rgba(255, 153, 0, 0.4);
  --shadow-glow-danger: 0 0 12px rgba(255, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 12px rgba(168, 85, 247, 0.4);
  
  /* === TRANSITIONS === */
  --transition-fast: 100ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  
  /* === Z-INDEX === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ============================================
   BASE STYLES
   ============================================ */
@layer base {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-base);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
  }
  
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
  h4 { font-size: var(--font-size-xl); }
  h5 { font-size: var(--font-size-lg); }
  h6 { font-size: var(--font-size-base); }
  
  p {
    margin-bottom: var(--spacing-4);
  }
  
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-normal);
  }
  
  a:hover {
    color: var(--color-primary-light);
  }
  
  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.125rem 0.25rem;
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  pre {
    font-family: var(--font-mono);
    padding: var(--spacing-4);
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }
  
  /* Remove focus outline for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }
  
  /* Keep focus outline for keyboard users */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* ============================================
   TOKEN UTILITIES (CDN MODE)
   ============================================ */
@layer utilities {
  .bg-bg-base { background-color: var(--color-bg-base); }
  .bg-bg-elevated { background-color: var(--color-bg-elevated); }
  .bg-bg-surface\/50 { background-color: rgb(30 41 59 / 0.5); }
  .bg-bg-surface\/80 { background-color: rgb(30 41 59 / 0.8); }
  .bg-primary { background-color: var(--color-primary); }
  .bg-primary\/10 { background-color: rgb(56 189 248 / 0.1); }
  .bg-primary\/20 { background-color: rgb(56 189 248 / 0.2); }
  .bg-primary\/30 { background-color: rgb(56 189 248 / 0.3); }
  .bg-success\/20 { background-color: rgb(0 255 0 / 0.2); }
  .bg-accent\/20 { background-color: rgb(168 85 247 / 0.2); }

  .text-primary { color: var(--color-primary); }
  .text-primary-light { color: var(--color-primary-light); }
  .text-success { color: var(--color-success); }
  .text-accent { color: var(--color-accent); }
  .text-bg-base { color: var(--color-bg-base); }
  .text-text-secondary { color: var(--color-text-secondary); }
  .text-text-muted { color: var(--color-text-muted); }

  .border-primary { border-color: var(--color-primary); }
  .border-primary\/30 { border-color: rgb(56 189 248 / 0.3); }
  .border-success\/30 { border-color: rgb(0 255 0 / 0.3); }
  .border-accent\/30 { border-color: rgb(168 85 247 / 0.3); }
  .border-border-default { border-color: var(--color-border-default); }

  .hover\:text-primary-light:hover { color: var(--color-primary-light); }
}

/* ============================================
   COMPONENTS
   ============================================ */
@layer components {
  
  /* === BUTTONS === */
  .akme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
  }
  
  .akme-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* Button Sizes */
  .akme-btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
  }
  
  .akme-btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-base);
  }
  
  /* Button Variants */
  .akme-btn-primary {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    border-color: var(--color-primary-dark);
  }
  
  .akme-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: var(--shadow-glow-primary);
    transform: translateY(-1px);
  }
  
  .akme-btn-secondary {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
  }
  
  .akme-btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border-accent);
  }
  
  .akme-btn-success {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 204, 0, 0.15));
    color: var(--color-success);
    border-color: var(--color-success);
  }
  
  .akme-btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.3), rgba(0, 204, 0, 0.25));
    box-shadow: var(--shadow-glow-success);
  }
  
  .akme-btn-warning {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.2), rgba(204, 119, 0, 0.15));
    color: var(--color-warning);
    border-color: var(--color-warning);
  }
  
  .akme-btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.3), rgba(204, 119, 0, 0.25));
    box-shadow: var(--shadow-glow-warning);
  }
  
  .akme-btn-danger {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(204, 0, 0, 0.15));
    color: var(--color-danger);
    border-color: var(--color-danger);
  }
  
  .akme-btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(204, 0, 0, 0.25));
    box-shadow: var(--shadow-glow-danger);
  }
  
  .akme-btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
  }
  
  .akme-btn-ghost:hover:not(:disabled) {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
  }
  
  .akme-btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .akme-btn-outline:hover:not(:disabled) {
    background-color: rgba(56, 189, 248, 0.1);
    box-shadow: var(--shadow-glow-primary);
  }
  
  /* Icon Button */
  .akme-btn-icon {
    padding: var(--spacing-3);
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .akme-btn-icon.akme-btn-sm {
    width: 2rem;
    height: 2rem;
    padding: var(--spacing-2);
  }
  
  .akme-btn-icon.akme-btn-lg {
    width: 3rem;
    height: 3rem;
    padding: var(--spacing-4);
  }
  
  /* === CARDS === */
  .akme-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
  }
  
  .akme-card-header {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  
  .akme-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }
  
  .akme-card-description {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }
  
  .akme-card-footer {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border-subtle);
  }
  
  /* === BADGES === */
  .akme-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
  }
  
  .akme-badge-default {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border-color: var(--color-border-default);
  }
  
  .akme-badge-primary {
    background-color: rgba(56, 189, 248, 0.15);
    color: var(--color-primary);
    border-color: rgba(56, 189, 248, 0.3);
  }
  
  .akme-badge-success {
    background-color: rgba(0, 255, 0, 0.15);
    color: var(--color-success);
    border-color: rgba(0, 255, 0, 0.3);
  }
  
  .akme-badge-warning {
    background-color: rgba(255, 153, 0, 0.15);
    color: var(--color-warning);
    border-color: rgba(255, 153, 0, 0.3);
  }
  
  .akme-badge-danger {
    background-color: rgba(255, 0, 0, 0.15);
    color: var(--color-danger);
    border-color: rgba(255, 0, 0, 0.3);
  }
  
  /* === ALERTS === */
  .akme-alert {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
  }
  
  .akme-alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .akme-alert-content {
    flex: 1;
  }
  
  .akme-alert-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
  }
  
  .akme-alert-description {
    font-size: var(--font-size-sm);
    opacity: 0.9;
  }
  
  .akme-alert-info {
    background-color: rgba(0, 212, 255, 0.1);
    color: var(--color-info);
    border-color: rgba(0, 212, 255, 0.3);
  }
  
  .akme-alert-success {
    background-color: rgba(0, 255, 0, 0.1);
    color: var(--color-success);
    border-color: rgba(0, 255, 0, 0.3);
  }
  
  .akme-alert-warning {
    background-color: rgba(255, 153, 0, 0.15);
    color: var(--color-warning);
    border-color: rgba(255, 153, 0, 0.3);
  }
  
  .akme-alert-danger {
    background-color: rgba(255, 0, 0, 0.15);
    color: var(--color-danger);
    border-color: rgba(255, 0, 0, 0.3);
  }
  
  /* === FORMS === */
  .akme-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
  }
  
  .akme-input {
    display: block;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
  }
  
  .akme-input::placeholder {
    color: var(--color-text-disabled);
  }
  
  .akme-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
  }
  
  .akme-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .akme-input-error {
    border-color: var(--color-danger);
  }
  
  .akme-input-error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
  }
  
  .akme-textarea {
    min-height: 6rem;
    resize: vertical;
  }
  
  .akme-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right var(--spacing-3) center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: var(--spacing-10);
  }
  
  .akme-helper-text {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
  
  .akme-error-message {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
  }
  
  .akme-form-group {
    margin-bottom: var(--spacing-6);
  }
  
  /* Checkbox & Radio */
  .akme-checkbox,
  .akme-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
  }
  
  .akme-checkbox input,
  .akme-radio input {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--color-primary);
  }
  
  /* === LAYOUT === */
  .akme-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
  }
  
  .akme-section {
    padding: var(--spacing-16) 0;
  }
  
  /* === UTILITIES === */
  .akme-text-gradient-primary {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .akme-text-gradient-accent {
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .akme-grid-bg {
    background-image: 
      radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%),
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  }
}