/* Simtro — tokens de design compartilhados entre suporte/, admin/, tracking/, public/remoto/ e doc/.
   Fonte: simtro-design-system/tokens/*.css (colors, typography, spacing, radius, elevation).
   Ver README do design system para as regras de uso de cor/tipografia/espacamento. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== Tokens --sim-* (fonte de verdade, nao editar sem atualizar o design system) ===== */

  /* Brand violet scale */
  --sim-violet-50:  #F3EEFF;
  --sim-violet-100: #E4D8FF;
  --sim-violet-200: #C9B3FF;
  --sim-violet-300: #A883FA;
  --sim-violet-400: #8A54F0;
  --sim-violet-500: #6E24E0;
  --sim-violet-600: #5300BF; /* brand */
  --sim-violet-700: #45009E;
  --sim-violet-800: #37017D;
  --sim-violet-900: #26005A;

  /* Brand gradient support (violet -> cyan -> turquoise) */
  --sim-cyan: #1897BA;
  --sim-turquoise: #04CAB9;
  --sim-gradient-brand: linear-gradient(130deg, #37017D 0%, #5300BF 46%, #1897BA 88%, #04CAB9 108%);

  /* Module accents */
  --sim-business:        #2C6EF3;
  --sim-business-dark:   #1D54D1;
  --sim-business-soft:   #EAF1FE;
  --sim-business-border: #BBD1FB;
  --sim-service:         #F9851D;
  --sim-service-dark:    #C2650A;
  --sim-service-soft:    #FFF3E6;
  --sim-service-border:  #FBD5A8;
  --sim-view:            #04AC48;
  --sim-view-dark:       #038539;
  --sim-view-soft:       #E4F7EC;
  --sim-view-border:     #A7E6C0;

  /* Neutrals (Slate) */
  --sim-slate-0:   #FFFFFF;
  --sim-slate-50:  #F4F4F6;
  --sim-slate-100: #ECECEF;
  --sim-slate-200: #E4E4E9;
  --sim-slate-300: #D1D1DB;
  --sim-slate-400: #9A9AA8;
  --sim-slate-500: #6B6B7B;
  --sim-slate-600: #52525E;
  --sim-slate-700: #3F3F49;
  --sim-slate-800: #27272E;
  --sim-slate-900: #16161A;

  /* Semantic */
  --sim-success:      #04AC48;
  --sim-success-soft: #E4F7EC;
  --sim-warning:      #D97706;
  --sim-warning-soft: #FFF3E6;
  --sim-danger:       #DC2626;
  --sim-danger-soft:  #FEE2E2;
  --sim-info:         #2C6EF3;
  --sim-info-soft:    #EAF1FE;

  /* Tons legiveis das cores semanticas.
     As cores semanticas "puras" acima sao vibrantes demais para carregar texto:
     branco sobre --sim-success da 3,0:1 e sobre --sim-warning da 3,2:1, abaixo dos
     4,5:1 exigidos pela WCAG AA. Os tons -on sao para PREENCHIMENTO com texto branco
     (botoes solidos) e os -text para TEXTO sobre o fundo -soft correspondente. */
  --sim-success-on:    #038539; /* = --sim-view-dark; branco por cima = 4,75:1 */
  --sim-success-text:  #026B2E; /* sobre --sim-success-soft = 5,98:1 */
  --sim-warning-on:    #B45309; /* branco por cima = 5,02:1 */
  --sim-warning-text:  #92400E; /* sobre --sim-warning-soft = 6,49:1 */
  --sim-cyan-dark:     #0E7C93; /* branco por cima = 4,86:1 (o --sim-cyan puro da 3,4:1) */

  /* Semantic aliases */
  --sim-color-brand:       var(--sim-violet-600);
  --sim-color-brand-hover: var(--sim-violet-700);
  --sim-color-brand-cyan:  var(--sim-cyan);
  --sim-color-text:        var(--sim-slate-900);
  --sim-color-text-muted:  var(--sim-slate-500);
  --sim-color-bg:          var(--sim-slate-50);
  --sim-color-surface:     var(--sim-slate-0);
  --sim-color-border:      var(--sim-slate-200);
  --sim-color-focus-ring:  var(--sim-violet-100);

  --sim-accent:      var(--sim-violet-600);
  --sim-accent-dark: var(--sim-violet-700);
  --sim-accent-soft: var(--sim-violet-50);

  /* Typography */
  --sim-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sim-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sim-text-display: 44px;
  --sim-text-h1: 32px;
  --sim-text-h2: 24px;
  --sim-text-h3: 18px;
  --sim-text-body: 15px;
  --sim-text-small: 13px;
  --sim-text-overline: 11px;
  --sim-weight-regular: 400;
  --sim-weight-medium: 500;
  --sim-weight-semibold: 600;
  --sim-weight-bold: 700;
  --sim-weight-extrabold: 800;
  --sim-track-display: -0.03em;
  --sim-track-heading: -0.02em;
  --sim-track-overline: 0.12em;
  --sim-leading-tight: 1.05;
  --sim-leading-snug: 1.3;
  --sim-leading-normal: 1.55;
  --sim-leading-relaxed: 1.7;

  /* Spacing (base 4) */
  --sim-space-1: 4px;
  --sim-space-2: 8px;
  --sim-space-3: 12px;
  --sim-space-4: 16px;
  --sim-space-5: 20px;
  --sim-space-6: 24px;
  --sim-space-8: 32px;
  --sim-space-10: 40px;
  --sim-space-12: 48px;
  --sim-space-16: 64px;
  --sim-container-max: 1440px;
  --sim-gutter: 24px;
  --sim-margin-side: 32px;
  --sim-measure: 72ch;

  /* Radius */
  --sim-radius-input: 6px;
  --sim-radius-btn: 10px;
  --sim-radius-card: 16px;
  --sim-radius-pill: 999px;

  /* Elevation */
  --sim-shadow-sm: 0 1px 2px rgba(16,16,26,.06);
  --sim-shadow-md: 0 4px 12px rgba(16,16,26,.08);
  --sim-shadow-lg: 0 12px 28px rgba(16,16,26,.12);
  --sim-shadow-modal: 0 24px 50px rgba(83,0,191,.18);
  --sim-focus-ring: 0 0 0 3px var(--sim-violet-100);

  /* ===== Aliases de compatibilidade =====
     Mapeiam os nomes de variavel ja usados hoje em suporte/admin/tracking/remoto para os
     tokens --sim-* acima, permitindo trocar o :root local por este import sem reescrever
     as regras existentes. Cobre a uniao dos nomes encontrados nas telas atuais. */
  --ink:      var(--sim-violet-900);
  --ink-2:    var(--sim-violet-800);
  --p:        var(--sim-color-brand);
  /* --p-dark e o hover/active da marca (regra do design system: 600 -> 700), nao o ciano.
     Para o acento ciano-turquesa use --cyan / --cyan-dark. */
  --p-dark:   var(--sim-violet-700);
  --p-light:  var(--sim-violet-50);
  --p-glow:   rgba(83,0,191,0.13);
  --cyan:      var(--sim-cyan);
  --cyan-dark: var(--sim-cyan-dark);
  --teal:     var(--sim-turquoise);
  --pause:    var(--sim-color-brand);
  --ok:       var(--sim-success);
  --ok-bg:    var(--sim-success-soft);
  --ok-on:    var(--sim-success-on);
  --ok-text:  var(--sim-success-text);
  --warn:     var(--sim-warning);
  --warn-bg:  var(--sim-warning-soft);
  --warn-on:  var(--sim-warning-on);
  --warn-text:var(--sim-warning-text);
  --err:      var(--sim-danger);
  --err-bg:   var(--sim-danger-soft);
  --bg:       var(--sim-color-bg);
  --surf:     var(--sim-color-surface);
  --surface:  var(--sim-color-surface);
  --bdr:      var(--sim-color-border);
  --t1:       var(--sim-color-text);
  /* Um degrau mais escuros que slate-500/400: nesses tons o texto secundario dava
     4,4:1 e o terciario 2,8:1 sobre branco. Agora 7,7:1 e 5,2:1. */
  --t2:       var(--sim-slate-600);
  --t3:       var(--sim-slate-500);
  --txt:      var(--sim-color-text);
  --txt-2:    var(--sim-slate-600);
  --sb-bg:    var(--sim-slate-900);
  --sh-sm:    var(--sim-shadow-sm);
  --sh:       var(--sim-shadow-sm);
  --sh-md:    var(--sim-shadow-md);
  --sh-lg:    var(--sim-shadow-lg);
  --r:        var(--sim-radius-btn);
  --r-lg:     var(--sim-radius-card);
  --r-xl:     var(--sim-radius-card);
  --radius:   var(--sim-radius-card);
  --f-display: var(--sim-font-sans);
  --f-mono:    var(--sim-font-mono);
  /* --brand-grad e o gradiente de marca completo (violeta -> ciano -> turquesa).
     Use SO em capa/hero grande, onde a ponta turquesa fica longe do texto: sobre
     ela o branco cai para 2,1:1. Em botao, bolha, chip ou barra — qualquer
     superficie pequena que carregue texto — use --brand-fill, que fica dentro da
     faixa violeta e mantem o branco acima de 9:1. */
  --brand-grad: var(--sim-gradient-brand);
  --brand-fill: linear-gradient(135deg, var(--sim-violet-700), var(--sim-violet-600));
}

/* Troca de accent por modulo (Business/Service/View Care) — usar data-modulo no container */
[data-modulo="business"] { --sim-accent: var(--sim-business); --sim-accent-dark: var(--sim-business-dark); --sim-accent-soft: var(--sim-business-soft); }
[data-modulo="service"]  { --sim-accent: var(--sim-service);  --sim-accent-dark: var(--sim-service-dark);  --sim-accent-soft: var(--sim-service-soft); }
[data-modulo="view"]     { --sim-accent: var(--sim-view);     --sim-accent-dark: var(--sim-view-dark);     --sim-accent-soft: var(--sim-view-soft); }