/* ============================================================
   TECH SILVA DESIGN SYSTEM — tokens canônicos (DS-01)
   Fonte única de verdade visual. Prefixo --ts-*.
   Aliases legados (--color-*, --p-*, --cvp-*) apontam para cá
   para permitir migração progressiva SEM big-bang.
   ============================================================ */
:root {
  /* ---------- CORES (paleta oficial) ---------- */
  --ts-color-primary:        #075FEA;
  --ts-color-primary-hover:  #0649c9;
  --ts-color-primary-active: #053a9f;
  --ts-color-primary-soft:   #EAF0F8;

  --ts-color-navy:           #061A33;
  --ts-color-navy-deep:      #031229;

  --ts-color-success:        #20B86A;
  --ts-color-success-bg:     #EAF9EF;
  --ts-color-warning:        #FF7A00;
  --ts-color-warning-bg:     #FFF6EB;
  --ts-color-danger:         #E5484D;
  --ts-color-danger-bg:      #FDF0F0;
  --ts-color-info:           #32A8FF;
  --ts-color-info-bg:        #EAF0F8;

  --ts-color-bg:             #F7F9FC;
  --ts-color-surface:        #FFFFFF;
  --ts-color-surface-muted:  #F7F9FC;
  --ts-color-border:         #D6E2F2;
  --ts-color-text:           #12213D;
  --ts-color-text-muted:     #53657A;
  --ts-color-text-inverse:   #FFFFFF;

  /* ---------- TIPOGRAFIA ---------- */
  --ts-font-heading: 'Sora', 'Manrope', 'Plus Jakarta Sans', sans-serif;
  --ts-font-body:    'Inter', Arial, Helvetica, sans-serif;
  --ts-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala tipográfica (clamp p/ responsivo) */
  --ts-text-display: clamp(2rem, 4vw, 2.75rem);   /* ~32-44px */
  --ts-text-h1:      clamp(1.75rem, 3vw, 2.5rem); /* ~28-40px */
  --ts-text-h2:      clamp(1.4rem, 2.2vw, 2rem);   /* ~22-32px */
  --ts-text-h3:      clamp(1.15rem, 1.6vw, 1.5rem);/* ~18-24px */
  --ts-text-body:    1rem;    /* 16px */
  --ts-text-small:   0.875rem;/* 14px */
  --ts-text-caption: 0.8125rem;/* 13px */
  --ts-text-label:   0.82rem;

  /* ---------- SPACING ---------- */
  --ts-space-1:  0.25rem;  /* 4px  */
  --ts-space-2:  0.5rem;   /* 8px  */
  --ts-space-3:  0.75rem;  /* 12px */
  --ts-space-4:  1rem;     /* 16px */
  --ts-space-5:  1.25rem;  /* 20px */
  --ts-space-6:  1.5rem;   /* 24px */
  --ts-space-7:  2rem;     /* 32px */
  --ts-space-8:  2.5rem;   /* 40px */
  --ts-space-9:  3rem;     /* 48px */
  --ts-space-10: 4rem;     /* 64px */
  --ts-space-11: 5rem;     /* 80px */

  /* ---------- BORDER RADIUS ---------- */
  --ts-radius-sm:  8px;
  --ts-radius-md:  14px;
  --ts-radius-lg:  20px;
  --ts-radius-xl:  28px;
  --ts-radius-pill: 999px;

  /* ---------- SHADOWS (funcionais; glow é exceção) ---------- */
  --ts-shadow-sm: 0 1px 2px rgba(6, 26, 51, 0.06);
  --ts-shadow-md: 0 2px 12px rgba(6, 26, 51, 0.08);
  --ts-shadow-lg: 0 6px 24px rgba(6, 26, 51, 0.12);

  /* ---------- MOTION ---------- */
  --ts-motion-fast:   120ms;
  --ts-motion-base:   200ms;
  --ts-motion-slow:   320ms;
  --ts-motion-ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- FOCUS / ACESSIBILIDADE ---------- */
  --ts-focus-ring: 0 0 0 3px rgba(7, 95, 234, 0.35);
  --ts-min-tap:    44px;   /* tamanho mínimo de toque */
}

/* ---------- ALIASES LEGADOS (migração progressiva) ---------- */
:root {
  /* área pública (--color-* / --font-* / --text-*) */
  --color-primary:        var(--ts-color-primary);
  --color-primary-dark:   #06358F;
  --color-navy:           var(--ts-color-navy);
  --color-navy-deep:      var(--ts-color-navy-deep);
  --color-blue-light:     var(--ts-color-primary-soft);
  --color-blue-soft:      var(--ts-color-bg);
  --color-cyan:           var(--ts-color-info);
  --color-green:          var(--ts-color-success);
  --color-green-light:    var(--ts-color-success-bg);
  --color-whatsapp:       #25D366;
  --color-orange:         var(--ts-color-warning);
  --color-orange-hover:   #E86700;
  --color-priority:       #FFC83D;
  --color-danger:         var(--ts-color-danger);
  --color-warning-bg:     var(--ts-color-warning-bg);
  --color-text:           var(--ts-color-text);
  --color-text-muted:     var(--ts-color-text-muted);
  --color-white:          var(--ts-color-surface);
  --color-background:     var(--ts-color-bg);
  --color-border:         var(--ts-color-border);
  --font-heading: var(--ts-font-heading);
  --font-body:    var(--ts-font-body);
  --text-xs:  var(--ts-text-caption);
  --text-sm:  var(--ts-text-small);
  --text-base: var(--ts-text-body);
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: var(--ts-text-h1);

  /* Portal do cliente (--p-*) */
  --p-navy:      var(--ts-color-navy);
  --p-navy-2:    #0E2A5E;
  --p-primary:   var(--ts-color-primary);
  --p-primary-2: #0A75F5;
  --p-blue-soft: var(--ts-color-primary-soft);
  --p-blue-bg:   #F0F6FF;
  --p-cyan:      #00B8D9;
  --p-green:     var(--ts-color-success);
  --p-green-bg:  var(--ts-color-success-bg);
  --p-bg:        var(--ts-color-bg);
  --p-white:     var(--ts-color-surface);
  --p-text:      var(--ts-color-text);
  --p-text-2:    var(--ts-color-text-muted);
  --p-border:    var(--ts-color-border);
  --p-danger:    var(--ts-color-danger);
  --p-radius:    var(--ts-radius-md);
  --p-radius-sm: var(--ts-radius-sm);
  --p-shadow:    var(--ts-shadow-md);
  --p-shadow-hover: var(--ts-shadow-lg);
  --p-font:      var(--ts-font-body);

  /* Convite (--cvp-*) */
  --cvp-primary: var(--ts-color-primary);
  --cvp-primary-dark: #06358F;
  --cvp-navy:   var(--ts-color-navy);
  --cvp-deep:   var(--ts-color-navy-deep);
}