/* EasyStok — Design tokens
   Identidade: azul-marinho profundo + laranja vibrante.
   Tom: prático, honesto, operacional. SaaS BR simples e sério.
*/

:root {
  /* ----- Color: neutrals (cool gray) ----- */
  --ink-950: #050B1B;          /* extremo: overlays opacos, sombras */
  --ink-900: #0A1530;          /* texto principal — segue o tom do navy */
  --ink-800: #122042;
  --ink-700: #2A3556;
  --ink-600: #4A5470;
  --ink-500: #707892;
  --ink-400: #98A0B4;
  --ink-300: #C2C8D6;
  --ink-200: #DEE2EB;
  --ink-100: #ECEFF5;
  --ink-50:  #F5F7FB;
  --paper:   #F8FAFD;          /* fundo claro principal */
  --white:   #FFFFFF;

  /* ----- Color: brand primary (azul-marinho profundo) ----- */
  --navy-900: #06143A;
  --navy-800: #0A1F52;
  --navy-700: #0E2A6E;          /* deep navy do logo */
  --navy-600: #15388A;
  --navy-500: #1E48A8;
  --navy-200: #BCC8E5;
  --navy-100: #DDE4F2;
  --navy-50:  #EDF1F9;

  /* alias antigo (compat) — aponta pro navy */
  --brand-900: var(--navy-900);
  --brand-800: var(--navy-800);
  --brand-700: var(--navy-700);
  --brand-600: var(--navy-700);   /* primary action default = navy */
  --brand-500: var(--navy-600);
  --brand-400: var(--navy-500);
  --brand-200: var(--navy-200);
  --brand-100: var(--navy-100);
  --brand-50:  var(--navy-50);

  /* ----- Color: brand accent (laranja vibrante) — escala 50→950 ----- */
  --orange-950: #4A1A03;
  --orange-900: #7A2A05;
  --orange-800: #9F3706;
  --orange-700: #BF4307;
  --orange-600: #E85814;          /* accent primary do logo */
  --orange-500: #F26B25;
  --orange-400: #F8884A;
  --orange-300: #FBA978;
  --orange-200: #FAC8AB;
  --orange-100: #FCDCC8;
  --orange-50:  #FEEFE3;

  /* ----- Color: status ----- */
  --warn-700: #8A5A00;
  --warn-600: #B57A00;            /* alerta validade próxima */
  --warn-500: #D89A1A;
  --warn-400: #E2B854;
  --warn-300: #ECCC7A;
  --warn-200: #F0DC9A;
  --warn-100: #FBEBC4;
  --warn-50:  #FCF5E0;

  --crit-700: #8E2A1E;
  --crit-600: #C03B2A;            /* crítico / vencido / sem estoque */
  --crit-500: #D45744;
  --crit-400: #E07566;
  --crit-300: #E8978A;
  --crit-200: #EFB7AD;
  --crit-100: #F8D8D2;
  --crit-50:  #FBEAE6;

  --ok-700: #0E6B3D;
  --ok-600: #18874E;              /* sucesso */
  --ok-500: #2DA365;
  --ok-400: #56B883;
  --ok-300: #8ACAA6;
  --ok-200: #BFE0CC;
  --ok-100: #D6EFDF;
  --ok-50:  #ECF7F0;

  /* ----- Type ----- */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Fraunces", "Inter", "Helvetica Neue", Helvetica, Arial, serif;

  /* ----- Surfaces (theme-aware) — defaults are light theme ----- */
  --bg-app: var(--paper);
  --bg-surface: var(--white);
  --bg-elevated: var(--white);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --border-soft: var(--ink-200);
  --border-strong: var(--ink-300);

  /* ----- Radii ----- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ----- Shadows (cool tone) ----- */
  --shadow-sm: 0 1px 2px rgba(10, 21, 48, 0.06), 0 1px 1px rgba(10, 21, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 21, 48, 0.08), 0 2px 4px rgba(10, 21, 48, 0.04);
  --shadow-lg: 0 16px 40px rgba(10, 21, 48, 0.14), 0 4px 12px rgba(10, 21, 48, 0.06);

  /* ----- Motion (duration + easing) ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----- Spacing scale ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px;

  /* ----- Focus rings (keyboard navigation) ----- */
  --focus-ring-navy: 0 0 0 3px rgba(30, 72, 168, .25);
  --focus-ring-orange: 0 0 0 3px rgba(232, 88, 20, .25);
  --focus-ring-danger: 0 0 0 3px rgba(192, 59, 42, .25);
  --focus-ring-success: 0 0 0 3px rgba(24, 135, 78, .25);

  /* ----- Motion (durations + easings) ----- */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-slower:  500ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----- Elevation scale (cool-toned shadows, hierarchical) ----- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10, 21, 48, .06), 0 1px 1px rgba(10, 21, 48, .04);
  --elev-2: 0 4px 12px rgba(10, 21, 48, .08), 0 2px 4px rgba(10, 21, 48, .04);
  --elev-3: 0 10px 28px rgba(10, 21, 48, .12), 0 4px 10px rgba(10, 21, 48, .06);
  --elev-4: 0 20px 48px rgba(10, 21, 48, .18), 0 8px 16px rgba(10, 21, 48, .08);

  /* ----- Surface semantic tokens (theme-aware via :root[data-theme="dark"]) ----- */
  --surface-app:      var(--bg-app);
  --surface-elevated: var(--bg-elevated);
  --surface-sunken:   var(--ink-50);
  --surface-overlay:  rgba(10, 21, 48, .55);
  --surface-inverted: var(--navy-900);

  /* ----- Intent tokens (semantic actions) ----- */
  --intent-action:           var(--orange-600);
  --intent-action-hover:     var(--orange-700);
  --intent-action-active:    var(--orange-800);
  --intent-action-fg:        var(--white);
  --intent-destructive:      var(--crit-600);
  --intent-destructive-hover:var(--crit-700);
  --intent-destructive-fg:   var(--white);
  --intent-success:          var(--ok-600);
  --intent-success-hover:    var(--ok-700);
  --intent-success-fg:       var(--white);
  --intent-info:             var(--navy-600);
  --intent-info-hover:       var(--navy-700);
  --intent-info-fg:          var(--white);
  --intent-warn:             var(--warn-600);
  --intent-warn-hover:       var(--warn-700);
  --intent-warn-fg:          var(--white);

  /* ----- Data viz palette (10 cores acessíveis, qualitative) -----
     Ordenadas por hue rotation para gráficos categóricos. Testadas para AA
     contra surface-app em ambos os temas. */
  --dv-1:  #E85814;   /* orange brand */
  --dv-2:  #1E48A8;   /* navy mid */
  --dv-3:  #18874E;   /* green */
  --dv-4:  #B57A00;   /* amber */
  --dv-5:  #6F42C1;   /* violet */
  --dv-6:  #0E94A8;   /* teal */
  --dv-7:  #C03B2A;   /* red */
  --dv-8:  #4A5470;   /* slate */
  --dv-9:  #DA3F87;   /* magenta */
  --dv-10: #2E7D32;   /* deep green */

  /* ----- Legacy aliases consumidos por views/inline CSS existentes -----
     Não remover sem auditoria global (referenciados em _Layout.cshtml,
     tailwind.config.js, e múltiplas Razor pages). */
  --es-bg:        var(--bg-app);
  --es-surface:   var(--bg-surface);
  --es-surface-2: #202b42;
  --es-card:      var(--bg-elevated);
  --es-accent:    var(--orange-500);
  --es-accent-h:  var(--orange-600);
  --es-ink:       var(--text-primary);
  --es-ink-dim:   var(--text-secondary);
  --es-ink-mute:  var(--text-muted);

}

/* ----- Dark theme ----- */
:root[data-theme="dark"],
.theme-dark {
  --bg-app: #06143A;          /* navy-900 */
  --bg-surface: #0A1F52;      /* navy-800 */
  --bg-elevated: #122042;
  --text-primary: #F2F4F9;
  --text-secondary: #BCC8E5;
  --text-muted: #8A95B0;
  --border-soft: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  /* keep --paper and --white as their literal colors;
     theme-aware surfaces live in --bg-app / --bg-surface / --bg-elevated.
     This way `color: var(--white)` stays actually white on dark colored backgrounds. */
  --ink-900: #F2F4F9;
  --ink-800: #E2E6F0;
  --ink-700: #BCC8E5;
  --ink-600: #98A6C8;
  --ink-500: #8A95B0;
  --ink-400: #6E7A99;
  --ink-300: rgba(255,255,255,0.22);
  --ink-200: rgba(255,255,255,0.12);
  --ink-100: rgba(255,255,255,0.08);
  --ink-50:  rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);

  /* Elevation re-mapped for dark surfaces */
  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 4px 14px rgba(0,0,0,.45);
  --elev-3: 0 10px 28px rgba(0,0,0,.55);
  --elev-4: 0 20px 48px rgba(0,0,0,.65);

  /* Surface re-mapped for dark */
  --surface-sunken:  rgba(255,255,255,.04);
  --surface-overlay: rgba(0,0,0,.65);
  --surface-inverted: var(--paper);
}

/* ----- Base ----- */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}

* { box-sizing: border-box; }

/* ----- Type scale ----- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.t-h1 {
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-h2 {
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t-h3 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.t-lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
}
.t-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
}
.t-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-600);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-600);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn:focus { outline: none; box-shadow: var(--focus-ring-navy); }
.btn-primary {
  background: var(--orange-600);
  color: var(--white);
}
.btn-primary:hover { background: var(--orange-700); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary:focus { box-shadow: var(--focus-ring-orange); }
.btn-navy {
  background: var(--navy-700);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-800); }
.btn-navy:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-navy:focus { box-shadow: var(--focus-ring-navy); }
.btn-secondary {
  background: var(--bg-surface);
  color: var(--navy-700);
  border-color: var(--border-soft);
}
.btn-secondary:hover {
  border-color: var(--navy-500);
  color: var(--navy-800);
  background: var(--ink-50);
}
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary:focus { box-shadow: var(--focus-ring-navy); }
[data-theme="dark"] .btn-secondary { color: var(--navy-100); }
[data-theme="dark"] .btn-secondary:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.btn-ghost {
  background: transparent;
  color: var(--navy-700);
}
.btn-ghost:hover { background: var(--ink-100); }
.btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-ghost:focus { box-shadow: var(--focus-ring-navy); }
.btn-dark {
  background: var(--navy-900);
  color: var(--white);
}
.btn-dark:hover { background: var(--navy-800); }
.btn-dark:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-dark:focus { box-shadow: var(--focus-ring-navy); }
.btn-sm { padding: 10px 14px; font-size: 14px; }
.btn-lg { padding: 18px 28px; font-size: 17px; }

/* loading state — mantem texto, prefixa spinner inline */
.btn[aria-busy="true"] {
  pointer-events: none;
  cursor: progress;
}
.btn[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin var(--duration-slow) linear infinite;
  flex: none;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* touch target — viewports estreitos garantem 44x44px */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* ----- Cards ----- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card-flat {
  background: var(--ink-50);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* ----- Badges ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
  transition: background-color .15s ease, color .15s ease;
}
.badge-ok    { background: var(--ok-50);    color: var(--ok-700);    border-color: var(--ok-200); }
.badge-warn  { background: var(--warn-50);  color: var(--warn-700);  border-color: var(--warn-200); }
.badge-crit  { background: var(--crit-50);  color: var(--crit-700);  border-color: var(--crit-200); }
.badge-info  { background: var(--navy-50);  color: var(--navy-700);  border-color: var(--navy-200); }
.badge-accent{ background: var(--orange-50);color: var(--orange-700);border-color: var(--orange-200); }
.badge-neutral { background: var(--ink-100); color: var(--ink-700);  border-color: var(--ink-200); }

/* dot indicator */
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; }

/* ----- Logo (cube + wordmark) ----- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy-700);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
}
.logo .es-mark {
  width: 26px; height: 26px;
  display: block; flex: none;
}
.logo .es-word { display: inline-flex; align-items: baseline; gap: 0;}
.logo .es-word .easy { color: var(--navy-700); }
.logo .es-word .stok { color: var(--orange-600); }

/* ----- Layout helpers ----- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.section { padding: var(--s-11) 0; }
.divider { height: 1px; background: var(--ink-200); border: 0; }

/* placeholder image */
.placeholder {
  background-color: var(--navy-50);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    rgba(14, 42, 110, 0.05) 10px 11px
  );
  border: 1px dashed var(--navy-200);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* signature curve flourish (used on hero/cards) */
.es-curve {
  position: absolute;
  inset: auto -10% -20% auto;
  width: 60%;
  height: 60%;
  pointer-events: none;
  opacity: 0.55;
}

/* ----- Dark mode overrides for legacy hardcoded Tailwind classes -----
   Many Razor views still ship `text-slate-900`, `text-gray-900`, `bg-white`, etc.
   Until each view is migrated to tokens, these rules ensure dark mode stays legible. */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }

/* ----- Accessibility: respect prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- Z-index hierarchy (canonical layers) -----
   Use these instead of arbitrary z-[xx] values to avoid overlap bugs.
   Order from bottom to top:
     base content      0
     dropdown          20
     sticky/topbar     30
     mobile bottom-nav 35
     drawer/sidebar    40
     modal backdrop    50
     modal panel       55
     toast / snackbar  60
     command palette   70   (Ctrl+K — must be above modals)
     loading overlay   80
*/
:root {
  --z-dropdown:        20;
  --z-sticky:          30;
  --z-bottom-nav:      35;
  --z-drawer:          40;
  --z-modal-backdrop:  50;
  --z-modal:           55;
  --z-toast:           60;
  --z-command:         70;
  --z-loading:         80;
}