/* ============================================================
   Appetity Design System — Tokens v2 (SUB-FRENTE E1)
   Mobile-first absoluto · clamp() fluid · brand dourado #7c3aed
   ----------------------------------------------------------------
   ORDEM DE CARGA: importar DEPOIS de:
     1) /assets/design-tokens.css         (legacy --vqen-*, --fs-*)
     2) /assets/design-system/tokens.css  (DSU-F2 --color-*, --z-modal-*)
   Aliases backward-compat preservam tudo: tokens-v2 só REFINA.
   ============================================================ */

:root {
  /* ============================================
     BRAND (decisão Marcos: dourado Appetity é primária)
     ============================================ */
  --brand-primary: #7c3aed;
  --brand-primary-hover: #6d28d9;
  --brand-primary-active: #5b21b6;
  --brand-primary-light: #ede9fe;
  --brand-primary-soft: #f5f3ff;
  --brand-dark: #0d2818;
  --brand-dark-hover: #163a25;
  --brand-accent: #3b82f6;          /* azul, complemento do gradient roxo→azul do logo VQ */
  --brand-accent-soft: #dbeafe;

  /* ============================================
     NEUTROS (escala Tailwind slate 50-900)
     ============================================ */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ============================================
     STATUS SEMANTICS
     ============================================ */
  --success-bg: #d1fae5; --success-fg: #065f46; --success-border: #10b981;
  --warning-bg: #fef3c7; --warning-fg: #92400e; --warning-border: #f59e0b;
  --danger-bg:  #fef2f2; --danger-fg:  #991b1b; --danger-border:  #dc2626;
  --info-bg:    #dbeafe; --info-fg:    #1e40af; --info-border:    #3b82f6;

  /* ============================================
     TIPOGRAFIA FLUID — 7 sizes via clamp()
     Inputs precisam ≥16px no mobile (no-zoom iOS).
     ============================================ */
  --font-xs:   clamp(11px, 0.7vw + 0.5rem, 12px);
  --font-sm:   clamp(12px, 0.8vw + 0.6rem, 13px);
  --font-base: clamp(14px, 1vw + 0.7rem, 15px);
  --font-md:   clamp(15px, 1.1vw + 0.8rem, 16px);
  --font-lg:   clamp(17px, 1.3vw + 0.9rem, 19px);
  --font-xl:   clamp(20px, 1.6vw + 1rem, 24px);
  --font-2xl:  clamp(24px, 2vw + 1.2rem, 32px);

  --leading-tight: 1.2;
  --leading-base: 1.5;
  --leading-relaxed: 1.65;

  /* ============================================
     SPACING — base 8px
     ============================================ */
  --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;

  /* ============================================
     TOUCH TARGETS (WCAG 2.5.8 AAA + iOS HIG)
     ============================================ */
  --touch-min: 44px;
  --touch-comfort: 48px;
  --touch-lg: 52px;

  /* ============================================
     RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* ============================================
     Z-INDEX HIERÁRQUICO COMPLETO
     ============================================ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1100;
  --z-modal-child: 1200;
  --z-modal-grandchild: 1300;
  --z-toast: 2000;
  --z-loading: 9000;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============================================
     LAYOUT
     ============================================ */
  --content-max: 1280px;
  --sidebar-w: 240px;
  --header-h: 56px;
  --bottomnav-h: 64px;
}

/* ============================================================
   ALIASES BACKWARD-COMPAT
   Tokens antigos viram aliases — ZERO quebra esperada.
   ============================================================ */
:root {
  /* legacy Appetity brand */
  --vqen-primary: var(--brand-primary);
  --vqen-primary-hover: var(--brand-primary-hover);
  --vqen-dark: var(--brand-dark);

  /* DSU-F2 color-* sobrescrevem para apontar p/ brand dourado */
  --color-primary:        var(--brand-primary);
  --color-primary-hover:  var(--brand-primary-hover);
  --color-primary-soft:   var(--brand-primary-soft);

  /* text/bg/border do design-tokens legacy */
  --text-1: var(--neutral-900);
  --text-2: var(--neutral-700);
  --text-3: var(--neutral-500);
  --text-4: var(--neutral-400);
  --bg-base:    #ffffff;
  --bg-subtle:  var(--neutral-50);
  --bg-muted:   var(--neutral-100);
  --bg-emphasis: var(--neutral-200);
  --border-base:   var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* fontes legacy --fs-* */
  --fs-xs:   var(--font-xs);
  --fs-sm:   var(--font-sm);
  --fs-base: var(--font-base);
  --fs-md:   var(--font-md);
  --fs-lg:   var(--font-lg);
  --fs-xl:   var(--font-xl);
  --fs-2xl:  var(--font-2xl);
  --fs-3xl:  var(--font-2xl);

  /* touch */
  --touch-target-min: var(--touch-min);

  /* z-index legacy DSU */
  --z-modal-pai:  var(--z-modal);
  --z-modal-filho: var(--z-modal-child);
  --z-modal-neto:  var(--z-modal-grandchild);

  /* status -soft (DSU)  */
  --color-success: var(--success-border);
  --color-success-soft: var(--success-bg);
  --color-warning: var(--warning-border);
  --color-warning-soft: var(--warning-bg);
  --color-warning-bg: var(--warning-bg);
  --color-danger:  var(--danger-border);
  --color-danger-soft: var(--danger-bg);
  --color-error:   var(--danger-fg);
  --color-error-bg: var(--danger-bg);
  --color-info:    var(--info-border);
  --color-info-soft: var(--info-bg);
}

/* ============================================================
   UTIL: prefere-reduce-motion (acessibilidade)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}