/* ============================================================
   GS Voucher — Design Tokens
   Source of truth: .docs/design-system/styles/tokens.css
   Sincronize manualmente quando o sistema de design evoluir.
   ============================================================ */

:root {
  /* ---------- Brand (navy operacional) ---------- */
  --brand-900: #0B1B2B;
  --brand-800: #102A40;
  --brand-700: #173755;
  --brand-600: #1F4971;
  --brand-500: #2E6BA0;
  --brand-50:  #EEF4FA;

  /* ---------- Accent — amber/gold (combustível) ---------- */
  --amber-700: #9A5B00;
  --amber-600: #C47400;
  --amber-500: #E89400;
  --amber-400: #F5B341;
  --amber-100: #FFF2D6;
  --amber-50:  #FFF8E7;

  /* Gold (variante luxo p/ skin pública) */
  --gold-500: #c9a84c;
  --gold-400: #d4b85c;
  --gold-300: #e2c97e;
  --gold-700: #b08d35;
  --gold-900: #8a6d2a;

  /* ---------- Semantic ---------- */
  --ok-700:   #0E6B4A;
  --ok-600:   #12895D;
  --ok-500:   #17A773;
  --ok-100:   #D6F2E4;
  --ok-50:    #EAF8F0;

  --warn-700: #8A4A00;
  --warn-600: #B25E00;
  --warn-500: #D67A0A;
  --warn-100: #FCE7C4;

  --danger-700: #8B1A1A;
  --danger-600: #B42323;
  --danger-500: #D43535;
  --danger-100: #FCDADA;
  --danger-50:  #FDEEEE;

  /* ---------- Neutrals — cool-slate ---------- */
  --ink-950: #0A0F17;
  --ink-900: #121821;
  --ink-800: #1C2430;
  --ink-700: #2B3644;
  --ink-600: #3F4D5E;
  --ink-500: #5B6A7D;
  --ink-400: #8593A3;
  --ink-300: #B2BDCB;
  --ink-200: #D3DBE4;
  --ink-150: #E1E7EE;
  --ink-100: #EEF2F6;
  --ink-50:  #F6F8FB;
  --ink-0:   #FFFFFF;

  /* Skin "dark luxury" (público/landing) */
  --dark-950: #08070d;
  --dark-900: #0c0b14;
  --dark-800: #14121d;

  /* ---------- Tipografia ---------- */
  --ff-sans:    'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --ff-serif:   'Playfair Display', 'Georgia', serif;     /* skin luxo */
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* ---------- Shadows (operacional) ---------- */
  --sh-sm: 0 1px 2px rgba(14, 22, 34, 0.06);
  --sh-md: 0 2px 4px rgba(14, 22, 34, 0.06), 0 6px 16px rgba(14, 22, 34, 0.04);
  --sh-lg: 0 8px 24px rgba(14, 22, 34, 0.08), 0 2px 6px rgba(14, 22, 34, 0.04);
  --sh-xl: 0 24px 56px rgba(14, 22, 34, 0.14), 0 4px 10px rgba(14, 22, 34, 0.06);

  /* Shadow lux (skin dark) */
  --sh-gold: 0 0 80px rgba(201, 168, 76, 0.12),
             0 30px 60px rgba(0, 0, 0, 0.4);

  /* ---------- Borders ---------- */
  --bd-subtle: 1px solid var(--ink-150);
  --bd-normal: 1px solid var(--ink-200);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --navbar-pill-h: 56px;

  /* ---------- Z-index ---------- */
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;

  /* Spacing baseline: 4px (use múltiplos de 4) */
}

/* ============================================================
   Reset enxuto
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Skin: light operacional (admin / agente / motorista logado)
   Aplique adicionando `theme-light` no <html> ou <body>.
   ============================================================ */
.theme-light,
.theme-light body {
  color: var(--ink-900);
  background: var(--ink-50);
}

/* ============================================================
   Skin: dark luxury (público / login / landing)
   Aplique adicionando `theme-dark` no <html> ou <body>.
   ============================================================ */
.theme-dark,
.theme-dark body {
  color: #ffffff;
  background: var(--dark-950);
}

/* ============================================================
   A11y: skip-link
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: var(--z-toast);
  padding: 10px 16px;
  background: var(--amber-500);
  color: var(--brand-900);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 16px; }

/* ============================================================
   Tabular numerals — helper p/ KPIs, IDs, valores
   ============================================================ */
.tabular { font-variant-numeric: tabular-nums; }
.mono    { font-family: var(--ff-mono); }
.serif   { font-family: var(--ff-serif); }

/* ============================================================
   Placeholder utilitário (stripes diagonais)
   ============================================================ */
.gs-placeholder {
  background-image: repeating-linear-gradient(135deg,
    var(--ink-100) 0 10px, var(--ink-150) 10px 20px);
  color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Foco — amber em qualquer skin
   ============================================================ */
.gs-focus:focus-visible,
button.gs-focus:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ============================================================
   Scrollbar — fina, contextual à skin
   ============================================================ */
.gs-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.gs-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.gs-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.theme-dark ::-webkit-scrollbar { width: 6px; height: 6px; }
.theme-dark ::-webkit-scrollbar-track { background: var(--dark-950); }
.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.18);
  border-radius: 3px;
}
.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.35);
}

/* Selection */
::selection { background: var(--amber-100); color: var(--ink-900); }
.theme-dark ::selection { background: rgba(201, 168, 76, 0.25); color: #fff; }

/* ============================================================
   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;
  }
}