/* FluxoLegal — Design tokens (fonte única). Marca: grafite + bordô, papel quente.
   Fontes: Fraunces (display), Inter (UI), JetBrains Mono (números de processo). */

:root{
  color-scheme: light;
  /* superfícies */
  --bg:        #F5F3EF;
  --bg-2:      #EFECE6;
  --surface:   #FFFFFF;
  --surface-2: #FAF9F6;
  --surface-3: #F3F1EC;
  --line:      #E6E1D8;
  --line-2:    #D8D2C6;
  /* tinta */
  --ink:   #17181C;
  --ink-2: #4E5058;
  --ink-3: #64666E;
  --field-line: #948D81; /* borda de campos de formulário (≥3:1) */
  --ink-inv: #FFFFFF;
  /* marca */
  --graphite:   #2C2E34;
  --graphite-2: #3A3D45;
  --brand:      #7A1C3A;   /* bordô do ponto do logo */
  --brand-600:  #64152F;
  --brand-400:  #9C3156;
  --brand-50:   #F8EDF0;
  --brand-100:  #F0D9E0;
  --brand-solid: #7A1C3A;  /* fundo sólido com texto branco (AA nos dois temas) */
  --brand-solid-hover: #64152F;
  --on-brand:   #FFFFFF;
  --gold:       #B08A4E;   /* detalhe premium, usar com parcimônia */
  /* semânticas */
  --ok:   #1F7A55; --ok-bg:   #E7F3ED;
  --warn: #96590A; --warn-bg: #FBF1E1;
  --crit: #B42335; --crit-bg: #FBE9EB;
  --info: #2F58C9; --info-bg: #EAF0FC;
  /* tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; --fs-4xl: 46px; --fs-5xl: 60px;
  /* forma */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --shadow-xs: 0 1px 2px rgba(23,24,28,.05);
  --shadow-sm: 0 1px 2px rgba(23,24,28,.04), 0 4px 12px rgba(23,24,28,.05);
  --shadow-md: 0 2px 4px rgba(23,24,28,.04), 0 12px 32px rgba(23,24,28,.08);
  --shadow-lg: 0 4px 8px rgba(23,24,28,.05), 0 24px 64px rgba(23,24,28,.12);
  --ring: 0 0 0 3px rgba(122,28,58,.32);
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .18s;
  --maxw: 1200px;
}

/* Modo escuro: automático pelo sistema, a menos que data-theme="light"; forçado com data-theme="dark" */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0F1013; --bg-2:#131418; --surface:#17181D; --surface-2:#1C1D23; --surface-3:#22242B;
    --line:#2A2C34; --line-2:#363943;
    --ink:#EEECE8; --ink-2:#B4B5BC; --ink-3:#8C8E97; --field-line:#6C6F7A;
    --graphite:#E9E7E2; --graphite-2:#CFCDC8;
    --brand:#D0587D; --brand-600:#E06E91; --brand-400:#B8436A; --brand-50:#2A1820; --brand-100:#3A1F2A; --brand-solid:#B8436A; --brand-solid-hover:#A8385E;
    --ok:#4CC08C; --ok-bg:#14271F; --warn:#E0A24A; --warn-bg:#2A2112; --crit:#F0697A; --crit-bg:#2C1519; --info:#7C9DF0; --info-bg:#161E33;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
    --shadow-md:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35); --shadow-lg:0 4px 8px rgba(0,0,0,.3),0 24px 64px rgba(0,0,0,.45);
    --ring:0 0 0 3px rgba(208,88,125,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0F1013; --bg-2:#131418; --surface:#17181D; --surface-2:#1C1D23; --surface-3:#22242B;
  --line:#2A2C34; --line-2:#363943;
  --ink:#EEECE8; --ink-2:#B4B5BC; --ink-3:#8C8E97; --field-line:#6C6F7A;
  --graphite:#E9E7E2; --graphite-2:#CFCDC8;
  --brand:#D0587D; --brand-600:#E06E91; --brand-400:#B8436A; --brand-50:#2A1820; --brand-100:#3A1F2A; --brand-solid:#B8436A; --brand-solid-hover:#A8385E;
  --ok:#4CC08C; --ok-bg:#14271F; --warn:#E0A24A; --warn-bg:#2A2112; --crit:#F0697A; --crit-bg:#2C1519; --info:#7C9DF0; --info-bg:#161E33;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
  --shadow-md:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35); --shadow-lg:0 4px 8px rgba(0,0,0,.3),0 24px 64px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(208,88,125,.45);
}

/* Base comum */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-100);color:var(--ink)}
.mono{font-family:var(--font-mono);font-feature-settings:"zero"}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;font-optical-sizing:auto}
.tabular{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Componentes primitivos compartilhados (site + app + portal) */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-md);border:1px solid transparent;font-weight:600;font-size:var(--fs-md);letter-spacing:-.005em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand-solid);color:var(--on-brand);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -6px rgba(122,28,58,.55)}
.btn-primary:hover{background:var(--brand-solid-hover)}
.btn-dark{background:var(--graphite);color:var(--bg)}
.btn-dark:hover{background:var(--graphite-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-quiet{background:transparent;color:var(--ink-2);height:36px;padding:0 12px}
.btn-quiet:hover{background:var(--surface-3);color:var(--ink)}
.btn-sm{height:34px;padding:0 14px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-lg{height:52px;padding:0 26px;font-size:var(--fs-base)}
.btn-block{width:100%}

.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.hint{font-size:var(--fs-xs);color:var(--ink-3)}
.input,.select,.textarea{width:100%;height:46px;padding:0 14px;background:var(--surface);border:1px solid var(--field-line);border-radius:var(--r-md);font-size:var(--fs-base);transition:border-color var(--dur),box-shadow var(--dur)}
.textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--crit)}

.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-brand{background:var(--brand-50);color:var(--brand)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge-brand{color:var(--brand-600)}}
:root[data-theme="dark"] .badge-brand{color:var(--brand-600)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-crit{background:var(--crit-bg);color:var(--crit)}
.badge-info{background:var(--info-bg);color:var(--info)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

.skeleton{background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 50%,var(--surface-3) 100%);background-size:200% 100%;animation:fxl-shimmer 1.3s linear infinite;border-radius:var(--r-sm)}
@keyframes fxl-shimmer{to{background-position:-200% 0}}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:fxl-spin .7s linear infinite;flex:none}
@keyframes fxl-spin{to{transform:rotate(360deg)}}

.toast-host{position:fixed;z-index:1000;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:260px;max-width:380px;padding:12px 16px;border-radius:var(--r-md);background:var(--graphite);color:var(--bg);box-shadow:var(--shadow-lg);font-size:var(--fs-md);display:flex;gap:10px;align-items:flex-start;animation:fxl-toast .25s var(--ease)}
@keyframes fxl-toast{from{opacity:0;transform:translateY(8px)}}
@media (max-width:600px){.toast-host{left:16px;right:16px}}