/* ============================================
   AKME DESIGN SYSTEM 2026 V2 - FOUNDATION
   Layer 1: Tokens compartilhados entre marcas
   Heranca: Akme Sistemas + Smart Navigator
   ============================================

   REGRA: Todo HTML da plataforma DEVE importar
   este arquivo ANTES de qualquer brand token.

   <link rel="stylesheet" href="foundation.css">
   <link rel="stylesheet" href="akme-tokens.css">
      -- OU --
   <link rel="stylesheet" href="cockpit-tokens.css">
   ============================================ */

:root {
  /* === SURFACE SCALE (slate - base compartilhada) ===
     Ambas as marcas usam slate como surface.
     Akme: bg-slate-950 (Tailwind class)
     SN:   #020617 (CSS var) = slate-950
     Resultado: IDENTICOS. Unificados aqui. */
  --f-bg:             #020617;   /* slate-950 - background principal */
  --f-surface:        #0f172a;   /* slate-900 - cards, panels */
  --f-surface-raised: #1e293b;   /* slate-800 - elevated elements */
  --f-surface-hover:  #334155;   /* slate-700 - hover states */
  --f-surface-active: #475569;   /* slate-600 - active/pressed */

  /* === BORDER SCALE (slate tones) === */
  --f-border:         #334155;   /* slate-700 - default border */
  --f-border-subtle:  #1e293b;   /* slate-800 - subtle dividers */
  --f-border-strong:  #475569;   /* slate-600 - emphasis border */
  --f-border-muted:   #64748b;   /* slate-500 - disabled border */

  /* === TEXT HIERARCHY (slate scale) === */
  --f-text:           #f8fafc;   /* slate-50  - primary text */
  --f-text-secondary: #94a3b8;   /* slate-400 - secondary text */
  --f-text-muted:     #64748b;   /* slate-500 - muted/placeholder */
  --f-text-disabled:  #475569;   /* slate-600 - disabled text */
  --f-text-inverse:   #020617;   /* slate-950 - text on light bg */

  /* === SEMANTIC COLORS (generico - ambas marcas) ===
     Estas sao cores de STATUS universais.
     Cada marca pode override se necessario. */
  --f-success:        #10b981;   /* emerald-500 */
  --f-success-soft:   rgba(16, 185, 129, 0.1);
  --f-success-text:   #34d399;   /* emerald-400 - legivel em dark */

  --f-warning:        #f59e0b;   /* amber-500 */
  --f-warning-soft:   rgba(245, 158, 11, 0.1);
  --f-warning-text:   #fbbf24;   /* amber-400 */

  --f-error:          #ef4444;   /* red-500 */
  --f-error-soft:     rgba(239, 68, 68, 0.1);
  --f-error-text:     #f87171;   /* red-400 */

  --f-info:           #06b6d4;   /* cyan-500 */
  --f-info-soft:      rgba(6, 182, 212, 0.1);
  --f-info-text:      #22d3ee;   /* cyan-400 */

  /* === TYPOGRAPHY ===
     Inter: fonte universal (unica constante confirmada)
     JetBrains Mono: dados numericos/tabulares
     Roboto Mono: fallback (compatibilidade V1) */
  --f-font:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-font-mono:      'JetBrains Mono', 'Roboto Mono', 'Consolas', 'Courier New', monospace;

  /* Font Sizes (Major Second scale 1.125) */
  --f-text-xs:        0.75rem;   /* 12px - captions, badges */
  --f-text-sm:        0.875rem;  /* 14px - secondary text, labels */
  --f-text-base:      1rem;      /* 16px - body text */
  --f-text-lg:        1.125rem;  /* 18px - emphasis */
  --f-text-xl:        1.25rem;   /* 20px - section titles */
  --f-text-2xl:       1.5rem;    /* 24px - card headings */
  --f-text-3xl:       2rem;      /* 32px - page headings */
  --f-text-4xl:       2.5rem;    /* 40px - hero text */
  --f-text-5xl:       3rem;      /* 48px - display */

  /* Font Weights */
  --f-weight-normal:  400;
  --f-weight-medium:  500;
  --f-weight-semi:    600;
  --f-weight-bold:    700;

  /* Line Heights */
  --f-leading-none:   1;
  --f-leading-tight:  1.25;
  --f-leading-normal: 1.5;
  --f-leading-relaxed:1.75;

  /* Letter Spacing */
  --f-tracking-tight: -0.02em;
  --f-tracking-normal:0;
  --f-tracking-wide:  0.05em;
  --f-tracking-widest:0.1em;

  /* === SPACING (4px base grid) ===
     Multiplos de 4 para consistencia pixel-perfect */
  --f-space-0:  0;
  --f-space-px: 1px;
  --f-space-0-5:0.125rem;  /* 2px */
  --f-space-1:  0.25rem;   /* 4px */
  --f-space-1-5:0.375rem;  /* 6px */
  --f-space-2:  0.5rem;    /* 8px */
  --f-space-3:  0.75rem;   /* 12px */
  --f-space-4:  1rem;      /* 16px */
  --f-space-5:  1.25rem;   /* 20px */
  --f-space-6:  1.5rem;    /* 24px */
  --f-space-8:  2rem;      /* 32px */
  --f-space-10: 2.5rem;    /* 40px */
  --f-space-12: 3rem;      /* 48px */
  --f-space-16: 4rem;      /* 64px */
  --f-space-20: 5rem;      /* 80px */
  --f-space-24: 6rem;      /* 96px */

  /* === TOUCH TARGETS === */
  --f-touch-min:        44px;  /* Minimo iOS/Android */
  --f-touch-comfortable:48px;  /* Padrao confortavel */
  --f-touch-large:      60px;  /* Para contextos de stress */

  /* === BORDER RADIUS === */
  --f-radius-none: 0;
  --f-radius-sm:   2px;
  --f-radius-md:   4px;
  --f-radius-lg:   6px;
  --f-radius-xl:   8px;
  --f-radius-2xl:  12px;
  --f-radius-full: 9999px;

  /* === SHADOWS (dark theme - sombras sutis) === */
  --f-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --f-shadow-md:  0 2px 4px rgba(0, 0, 0, 0.5);
  --f-shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.5);
  --f-shadow-xl:  0 8px 16px rgba(0, 0, 0, 0.5);
  --f-shadow-none:none;

  /* === TRANSITIONS === */
  --f-transition-fast:   100ms ease-out;
  --f-transition-normal: 200ms ease-out;
  --f-transition-slow:   300ms ease-out;

  /* === Z-INDEX SCALE === */
  --f-z-base:     0;
  --f-z-dropdown: 100;
  --f-z-sticky:   200;
  --f-z-modal:    300;
  --f-z-popover:  400;
  --f-z-tooltip:  500;
  --f-z-alert:    600;
  --f-z-max:      9999;

  /* === LAYOUT WIDTHS === */
  --f-max-xs:   320px;
  --f-max-sm:   640px;
  --f-max-md:   768px;
  --f-max-lg:   1024px;
  --f-max-xl:   1280px;
  --f-max-2xl:  1536px;

  /* === OPACITY === */
  --f-opacity-disabled: 0.5;
  --f-opacity-hover:    0.8;
  --f-opacity-muted:    0.6;
}

/* === RESET BASE ===
   Aplicado em toda pagina que usa foundation */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--f-font);
  font-size: 16px;
  line-height: var(--f-leading-normal);
  color: var(--f-text);
  background-color: var(--f-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
}

/* === ACCESSIBILITY: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --f-transition-fast:   0ms;
    --f-transition-normal: 0ms;
    --f-transition-slow:   0ms;
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: more) {
  :root {
    --f-border:         #666666;
    --f-text-secondary: #ffffff;
    --f-text-muted:     #aaaaaa;
  }
}

/* === UTILITY CLASSES (Foundation level) ===
   Classes utilitarias basicas para uso direto.
   Nao substitui Tailwind - complementa com tokens. */

/* Text */
.f-text          { color: var(--f-text); }
.f-text-secondary{ color: var(--f-text-secondary); }
.f-text-muted    { color: var(--f-text-muted); }
.f-text-success  { color: var(--f-success-text); }
.f-text-warning  { color: var(--f-warning-text); }
.f-text-error    { color: var(--f-error-text); }
.f-text-info     { color: var(--f-info-text); }

/* Backgrounds */
.f-bg            { background-color: var(--f-bg); }
.f-surface       { background-color: var(--f-surface); }
.f-surface-raised{ background-color: var(--f-surface-raised); }

/* Mono font */
.f-mono          { font-family: var(--f-font-mono); }

/* Label style (uppercase, tracked, small) */
.f-label {
  font-size: var(--f-text-xs);
  font-weight: var(--f-weight-medium);
  color: var(--f-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--f-tracking-widest);
}

/* Value style (mono, large) */
.f-value {
  font-family: var(--f-font-mono);
  font-size: var(--f-text-2xl);
  font-weight: var(--f-weight-bold);
  line-height: var(--f-leading-none);
}

/* Unit style (small, info colored) */
.f-unit {
  font-size: var(--f-text-sm);
  color: var(--f-info-text);
}