/* ═══════════════════════════════════════════════════════════════════════════
   ZiulHub — Design Tokens
   Source of truth de todas as variáveis CSS.
   Ver docs/identity/2026-04-21-ziulhub-design-system.md para especificação.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutros ───────────────────────────────────────────────────────────── */
  --color-text-primary:   #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary:  #b0b0b5;
  --color-text-on-accent: #ffffff;

  --color-surface:        #ffffff;
  --color-surface-alt:    #fafafa;
  --color-surface-raised: #ffffff;
  --color-background:     #f5f5f7;

  --color-border:         #d2d2d7;
  --color-border-subtle:  rgba(0, 0, 0, 0.06);
  --color-border-strong:  #1d1d1f;

  /* ── Accent (interação) ────────────────────────────────────────────────── */
  --color-accent:         #0071e3;
  --color-accent-hover:   #0077ed;
  --color-accent-pressed: #0059b8;
  --color-accent-soft:    #e8f0fe;

  /* ── Cores de marca (uso restrito: logo, badges brand) ─────────────────── */
  /* Amostrados de MAIN/ESCUDO/RETANGULAR LOGO ZIUL HUB.png em 2026-04-21.
     O azul da marca é praticamente o mesmo do accent Apple que já usávamos
     (#0070E0 vs #0071E3), então deliberadamente apontamos para --color-accent. */
  --color-brand-blue:     var(--color-accent);
  --color-brand-magenta:  #E83890;
  --color-brand-dark:     #303030;

  /* ── Feedback ──────────────────────────────────────────────────────────── */
  --color-success:        #34c759;
  --color-success-soft:   #e8f8ec;
  --color-error:          #ff3b30;
  --color-error-soft:     #fdecea;
  --color-warning:        #ff9500;
  --color-warning-soft:   #fff4e0;
  --color-info:           var(--color-accent);

  /* ── Order status dots (bolinha da coluna STATUS em My Sales) ────────── */
  --color-status-pendencies: var(--color-error);      /* vermelho   */
  --color-status-order:      #ff6a00;                  /* laranja    */
  --color-status-deliver:    #7c3aed;                  /* roxo       */
  --color-status-delivered:  var(--color-success);    /* verde      */
  --color-status-warranty:   var(--color-accent);     /* azul       */
  --color-status-partial:    #f59e0b;                  /* âmbar      */
  --color-status-canceled:   var(--color-text-primary); /* preto    */

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-2xs: 10px;
  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-md:  13px;
  --font-size-lg:  15px;
  --font-size-xl:  17px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;
  --font-size-4xl: 36px;

  --font-weight-thin:     200;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.7;

  --tracking-tight:  -0.5px;
  --tracking-normal:  0;
  --tracking-wide:    0.5px;
  --tracking-caps:    1.2px;

  /* ── Espaçamento ───────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Raios de borda ────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── Sombras ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04),
               0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06),
               0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12),
               0 20px 60px rgba(0, 0, 0, 0.18);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --motion-instant: 0ms;
  --motion-fast:   120ms;
  --motion-base:   160ms;
  --motion-medium: 240ms;
  --motion-slow:   320ms;

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-linear:     linear;

  /* ── Z-index ───────────────────────────────────────────────────────────── */
  --z-base:      0;
  --z-sticky:    10;
  --z-dropdown:  100;
  --z-fixed-nav: 200;
  --z-overlay:   500;
  --z-modal:     700;
  --z-toast:     900;
  --z-tooltip:   1000;

  /* ── Navbar ────────────────────────────────────────────────────────────── */
  --nav-height: 56px;
  --nav-blur:   20px;
  --nav-bg:     rgba(255, 255, 255, 0.82);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.06);

  /* ── Touch targets (iPad-first) ────────────────────────────────────────── */
  --touch-target-min: 44px;
  --touch-target-lg:  48px;

  /* ── Aliases de compatibilidade temporária (remover na Fase 2 final) ──── */
  --bg:               var(--color-background);
  --white:            var(--color-surface);
  --text-primary:     var(--color-text-primary);
  --text-secondary:   var(--color-text-secondary);
  --border:           var(--color-border);
  --accent:           var(--color-accent);
  --success:          var(--color-success);
  --error:            var(--color-error);
  --radius:           var(--radius-md);
  --radius-sm-legacy: var(--radius-sm);
  --shadow:           var(--shadow-sm);
  --nav-h:            var(--nav-height);
  --font:             var(--font-family);

  --font-size-base:   var(--font-size-lg);
  --space-7:          28px;
  --border-focus:     var(--color-accent);
}

/* ── prefers-reduced-motion: desliga todas as transições/animações ──────── */
@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;
  }
}