/* ==========================================================================
   TachoLogic — Design System v1.0
   Carregado ANTES de styles.css e tokens.css.
   Define todos os tokens, utilitarios e componentes base.

   Hierarquia de carga:
     1. design-system.css   (este ficheiro — tokens + utilitarios)
     2. styles.css           (layout e componentes de ecra)
     3. tokens.css           (overrides opcionais)
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. CORES
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds (Zinc scale) ──────────────────────────────────────── */
  --ds-bg-base:      #09090B;    /* Zinc 950 */
  --ds-bg-surface:   #0C0C0F;
  --ds-bg-card:      #18181B;    /* Zinc 900 */
  --ds-bg-card2:     #1F1F23;
  --ds-bg-elevated:  #27272A;    /* Zinc 800 */
  --ds-bg-hover:     #2E2E33;

  /* ── Borders ───────────────────────────────────────────────────────── */
  --ds-border:       rgba(255,255,255,0.06);
  --ds-border-2:     rgba(255,255,255,0.11);
  --ds-border-focus: rgba(16,185,129,0.4);

  /* ── Semantic Colors ───────────────────────────────────────────────── */
  --ds-green:        #10B981;      /* Emerald 500 — primary/success */
  --ds-green-dim:    rgba(16,185,129,0.10);
  --ds-green-glow:   rgba(16,185,129,0.25);

  --ds-amber:        #F59E0B;      /* Amber 500 — warning */
  --ds-amber-dim:    rgba(245,158,11,0.10);
  --ds-amber-glow:   rgba(245,158,11,0.25);

  --ds-red:          #EF4444;      /* Red 500 — danger/critical */
  --ds-red-dim:      rgba(239,68,68,0.10);
  --ds-red-glow:     rgba(239,68,68,0.25);

  --ds-blue:         #3B82F6;      /* Blue 500 — info */
  --ds-blue-dim:     rgba(59,130,246,0.10);

  /* ── Text (Zinc scale) ─────────────────────────────────────────────── */
  --ds-text-1:       #F4F4F5;    /* Zinc 100 — primary */
  --ds-text-2:       #A1A1AA;    /* Zinc 400 — secondary */
  --ds-text-3:       #52525B;    /* Zinc 600 — tertiary/muted */
  --ds-text-inverse: #09090B;    /* dark on light bg */

  /* ── Backwards-compat aliases (consumed by styles.css) ─────────────── */
  --bg:       var(--ds-bg-base);
  --surface:  var(--ds-bg-surface);
  --card:     var(--ds-bg-card);
  --card2:    var(--ds-bg-card2);
  --elevated: var(--ds-bg-elevated);
  --border:   var(--ds-border);
  --border2:  var(--ds-border-2);
  --green:    var(--ds-green);
  --green-dim:var(--ds-green-dim);
  --amber:    var(--ds-amber);
  --amber-dim:var(--ds-amber-dim);
  --red:      var(--ds-red);
  --red-dim:  var(--ds-red-dim);
  --blue:     var(--ds-blue);
  --text:     var(--ds-text-1);
  --text2:    var(--ds-text-2);
  --text3:    var(--ds-text-3);

  /* compat shortcuts */
  --bg-app:         var(--ds-bg-base);
  --bg-card:        var(--ds-bg-card);
  --bg-elevated:    var(--ds-bg-elevated);
  --border-subtle:  var(--ds-border);
  --text-primary:   var(--ds-text-1);
  --text-secondary: var(--ds-text-2);
  --accent-success: var(--ds-green);
  --accent-warning: var(--ds-amber);
  --accent-danger:  var(--ds-red);
  --primary:        var(--ds-green);
  --warning:        var(--ds-amber);
  --danger:         var(--ds-red);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TIPOGRAFIA
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Font families */
  --ds-font-display:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;

  /* compat aliases */
  --df: var(--ds-font-display);
  --db: var(--ds-font-body);
  --dm: var(--ds-font-mono);

  /* Font sizes — mobile-first type scale */
  --ds-fs-xs:    10px;    /* labels minusculos, badges */
  --ds-fs-sm:    12px;    /* labels, sub-text */
  --ds-fs-base:  14px;    /* body text */
  --ds-fs-md:    16px;    /* inputs, titulos de card */
  --ds-fs-lg:    20px;    /* titulos de seccao */
  --ds-fs-xl:    28px;    /* titulos de ecra */
  --ds-fs-2xl:   34px;    /* hero numbers */
  --ds-fs-3xl:   48px;    /* numeros destaque */

  /* Font weights */
  --ds-fw-normal:  400;
  --ds-fw-medium:  500;
  --ds-fw-semi:    600;
  --ds-fw-bold:    700;
  --ds-fw-extra:   800;

  /* Line heights */
  --ds-lh-tight:   1.1;
  --ds-lh-snug:    1.3;
  --ds-lh-normal:  1.5;
  --ds-lh-relaxed: 1.65;

  /* Letter spacing */
  --ds-ls-tight:   -0.02em;
  --ds-ls-normal:  0;
  --ds-ls-wide:    0.04em;
  --ds-ls-wider:   0.08em;
  --ds-ls-widest:  0.12em;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. ESPACAMENTO
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ds-space-1:   4px;
  --ds-space-2:   8px;
  --ds-space-3:   12px;
  --ds-space-4:   16px;
  --ds-space-5:   20px;
  --ds-space-6:   24px;
  --ds-space-8:   32px;
  --ds-space-10:  40px;
  --ds-space-12:  48px;

  /* Screen gutter — padding lateral do ecra */
  --ds-gutter:    16px;

  /* Card gap — espaco entre cards */
  --ds-card-gap:  10px;

  /* compat */
  --spacing:      var(--ds-space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. BORDAS E RAIOS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ds-radius-sm:   8px;
  --ds-radius-md:   12px;
  --ds-radius-lg:   16px;
  --ds-radius-xl:   20px;
  --ds-radius-2xl:  24px;
  --ds-radius-full: 9999px;

  /* compat */
  --radius: var(--ds-radius-xl);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. SOMBRAS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ds-shadow-sm:     0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-md:     0 4px 12px rgba(0,0,0,0.35);
  --ds-shadow-lg:     0 8px 24px rgba(0,0,0,0.4);
  --ds-shadow-xl:     0 12px 40px rgba(0,0,0,0.5);
  --ds-shadow-green:  0 6px 22px rgba(16,185,129,0.22);
  --ds-shadow-red:    0 6px 22px rgba(239,68,68,0.22);
  --ds-shadow-amber:  0 6px 22px rgba(245,158,11,0.22);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. TRANSICOES
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ds-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-duration-fast:   120ms;
  --ds-duration-normal: 200ms;
  --ds-duration-slow:   350ms;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. COMPONENTES BASE — CARDS
   ══════════════════════════════════════════════════════════════════════════ */

/* Card base mixin via class */
.ds-card {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-4);
  position: relative;
  overflow: hidden;
}

.ds-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}

/* Card variants */
.ds-card--success {
  border-color: rgba(16,185,129,0.2);
}
.ds-card--success::before {
  background: linear-gradient(90deg, transparent, var(--ds-green-glow), transparent);
}

.ds-card--warning {
  border-color: rgba(245,158,11,0.2);
}
.ds-card--warning::before {
  background: linear-gradient(90deg, transparent, var(--ds-amber-glow), transparent);
}

.ds-card--danger {
  border-color: rgba(239,68,68,0.2);
}
.ds-card--danger::before {
  background: linear-gradient(90deg, transparent, var(--ds-red-glow), transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   8. COMPONENTES BASE — BOTOES
   ══════════════════════════════════════════════════════════════════════════ */

/* Touch target minimo 44px — regra de acessibilidade */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-semi);
  border: none;
  cursor: pointer;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--ds-radius-lg);
  transition: opacity var(--ds-duration-fast) var(--ds-ease),
              transform var(--ds-duration-fast) var(--ds-ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  width: 100%;
}

.ds-btn:active {
  transform: scale(0.98);
  opacity: 0.88;
}

/* Primary — green gradient */
.ds-btn--primary {
  background: linear-gradient(145deg, var(--ds-green), #059669);
  color: var(--ds-text-inverse);
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wider);
  text-transform: uppercase;
  box-shadow: var(--ds-shadow-green);
}

/* Secondary — elevated bg */
.ds-btn--secondary {
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-2);
  color: var(--ds-text-1);
  font-size: 15px;
}

/* Ghost / link */
.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text-2);
  font-size: var(--ds-fs-base);
  min-height: 40px;
  padding: 8px 16px;
}

.ds-btn--ghost:active {
  color: var(--ds-text-1);
}

/* Danger */
.ds-btn--danger {
  background: linear-gradient(145deg, var(--ds-red), #DC2626);
  color: #fff;
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-bold);
  box-shadow: var(--ds-shadow-red);
}

/* ══════════════════════════════════════════════════════════════════════════
   9. COMPONENTES BASE — INPUTS
   ══════════════════════════════════════════════════════════════════════════ */
.ds-input {
  width: 100%;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-lg);
  padding: 13px 16px;
  font-size: var(--ds-fs-md);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-1);
  font-family: var(--ds-font-body);
  outline: none;
  transition: border-color var(--ds-duration-normal) var(--ds-ease);
  min-height: 44px;
}

.ds-input:focus {
  border-color: var(--ds-border-focus);
}

.ds-input::placeholder {
  color: var(--ds-text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   10. COMPONENTES BASE — BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wider);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ds-radius-full);
  white-space: nowrap;
}

.ds-badge--success {
  background: var(--ds-green-dim);
  border: 1px solid rgba(16,185,129,0.2);
  color: var(--ds-green);
}

.ds-badge--warning {
  background: var(--ds-amber-dim);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--ds-amber);
}

.ds-badge--danger {
  background: var(--ds-red-dim);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--ds-red);
}

.ds-badge--info {
  background: var(--ds-blue-dim);
  border: 1px solid rgba(59,130,246,0.2);
  color: var(--ds-blue);
}

.ds-badge--neutral {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ds-border-2);
  color: var(--ds-text-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   11. COMPONENTES BASE — LABELS DE SECCAO
   ══════════════════════════════════════════════════════════════════════════ */
.ds-section-label {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semi);
  letter-spacing: var(--ds-ls-widest);
  text-transform: uppercase;
  color: var(--ds-text-3);
  margin-bottom: var(--ds-space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   12. COMPONENTES BASE — PROGRESS BAR
   ══════════════════════════════════════════════════════════════════════════ */
.ds-progress {
  width: 100%;
  height: 6px;
  background: var(--ds-bg-elevated);
  border-radius: var(--ds-radius-full);
  overflow: hidden;
}

.ds-progress__fill {
  height: 100%;
  border-radius: var(--ds-radius-full);
  transition: width var(--ds-duration-slow) var(--ds-ease);
}

.ds-progress__fill--green  { background: var(--ds-green); }
.ds-progress__fill--amber  { background: var(--ds-amber); }
.ds-progress__fill--red    { background: var(--ds-red);   }

/* ══════════════════════════════════════════════════════════════════════════
   13. COMPONENTES BASE — TOGGLE SWITCH
   ══════════════════════════════════════════════════════════════════════════ */
.ds-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.ds-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ds-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  transition: background var(--ds-duration-normal) var(--ds-ease),
              border-color var(--ds-duration-normal) var(--ds-ease);
}

.ds-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ds-text-2);
  transition: transform var(--ds-duration-normal) var(--ds-ease-spring),
              background var(--ds-duration-normal) var(--ds-ease);
}

.ds-toggle input:checked + .ds-toggle__track {
  background: var(--ds-green-dim);
  border-color: rgba(16,185,129,0.3);
}

.ds-toggle input:checked + .ds-toggle__track::after {
  transform: translateX(20px);
  background: var(--ds-green);
}

/* ══════════════════════════════════════════════════════════════════════════
   14. COMPONENTES BASE — BOTTOM SHEET / MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-duration-slow) var(--ds-ease);
}

.ds-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.ds-bottom-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-2xl) var(--ds-radius-2xl) var(--ds-radius-lg) var(--ds-radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  transform: translateY(40px);
  transition: transform var(--ds-duration-slow) var(--ds-ease);
}

.ds-overlay.visible .ds-bottom-sheet {
  transform: translateY(0);
}

/* Handle/grabber */
.ds-bottom-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-text-3);
  margin: 0 auto var(--ds-space-2);
}

/* Desktop: centered modal */
@media (min-width: 768px) {
  .ds-overlay {
    align-items: center;
    padding: var(--ds-space-6);
  }
  .ds-bottom-sheet {
    border-radius: var(--ds-radius-2xl);
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. COMPONENTES BASE — ALERT BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh-normal);
  font-family: var(--ds-font-body);
}

.ds-alert--warning {
  background: var(--ds-amber-dim);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--ds-amber);
}

.ds-alert--danger {
  background: var(--ds-red-dim);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--ds-red);
}

.ds-alert--success {
  background: var(--ds-green-dim);
  border: 1px solid rgba(16,185,129,0.2);
  color: var(--ds-green);
}

.ds-alert--info {
  background: var(--ds-blue-dim);
  border: 1px solid rgba(59,130,246,0.2);
  color: var(--ds-blue);
}

/* ══════════════════════════════════════════════════════════════════════════
   16. UTILITARIOS
   ══════════════════════════════════════════════════════════════════════════ */

/* Scroll sem scrollbar */
.ds-scroll-hide {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ds-scroll-hide::-webkit-scrollbar { display: none; }

/* Truncate text */
.ds-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Screen reader only */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Animacoes de entrada */
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.ds-animate-in {
  animation: ds-slide-up var(--ds-duration-slow) var(--ds-ease) both;
}

/* Pulsing dot (status indicators) */
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.ds-dot-pulse {
  animation: ds-pulse 2s ease infinite;
}

/* Loading spinner */
.ds-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ds-border-2);
  border-top-color: var(--ds-green);
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. SEMANTIC — SEVERITY COLORS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ds-sev-msi:  #EF4444;          /* Most Serious Infringement */
  --ds-sev-vsi:  #F87171;          /* Very Serious */
  --ds-sev-si:   var(--ds-amber);  /* Serious */
  --ds-sev-mi:   var(--ds-text-3); /* Minor */
}

/* ══════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE BREAKPOINTS (utility classes)
   ══════════════════════════════════════════════════════════════════════════ */

/* Mobile-first: default styles are for < 375px */

/* Small phone (375px) — default target */
@media (min-width: 375px) {
  :root {
    --ds-gutter: 16px;
  }
}

/* Tablet (768px) */
@media (min-width: 768px) {
  :root {
    --ds-gutter: 24px;
    --ds-fs-xl: 32px;
    --ds-fs-2xl: 40px;
  }
}

/* Desktop (1024px) */
@media (min-width: 1024px) {
  :root {
    --ds-gutter: 32px;
  }
}

/* Large desktop (1440px) */
@media (min-width: 1440px) {
  :root {
    --ds-gutter: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   19. COPILOT — SEND BUTTON FIX (BUG-7)
   Garante que o botao enviar e um circulo perfeito de 44x44px
   ══════════════════════════════════════════════════════════════════════════ */
.copilot-send-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  border-radius: 50% !important;
  padding: 0 !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

/* Copilot chips — altura consistente (BUG-8) */
.cp-chips-row .copilot-chip,
.copilot-chips-row .copilot-chip,
.chip {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1;
}

/* Copilot input — padding correcto (BUG-9) */
.copilot-input {
  padding: 12px 18px !important;
  min-height: 44px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   20. SETTINGS — ITEM HEIGHT + TOGGLE FIX (BUG Settings)
   ══════════════════════════════════════════════════════════════════════════ */
.sfield {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Section labels em settings */
.slbl {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-widest);
  text-transform: uppercase;
  color: var(--ds-text-3);
  padding: 16px 3px 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   21. GLOBAL FIXES — Acessibilidade e Consistencia
   ══════════════════════════════════════════════════════════════════════════ */

/* Todos os botoes precisam de min 44px touch target */
button, [role="button"], .ni {
  min-height: 44px;
}

/* Focus visible para acessibilidade */
:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

/* Prevenir text selection em elementos interactivos */
button, .ni, .chip, .copilot-chip, .lbtn2, .ds-btn, .ds-toggle {
  -webkit-user-select: none;
  user-select: none;
}

/* Safe area padding para bottom nav em iPhones com notch */
.bnav, .bottom-nav {
  padding-bottom: max(26px, env(safe-area-inset-bottom, 26px));
}