/* ============================================================
   Otz.ai by Aimi Digital — Design Tokens (v1 · Apple-grade)
   Paleta e tipografia inspiradas na Apple. Em dispositivos Apple,
   a fonte do sistema resolve para SF Pro automaticamente.
   ============================================================ */
:root{
  /* Tipografia — system stack (SF Pro em Apple), tabular para números */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,sans-serif;

  /* Cores neutras (Apple) */
  --ink:#1d1d1f;       /* near-black da Apple */
  --ink-2:#6e6e73;     /* cinza secundário */
  --ink-3:#6f6f76;     /* cinza terciário — UX-S6: ~4.6:1 em #fff (AA), antes #86868b ~3.5:1 */
  --bg:#ffffff;
  --bg-2:#f5f5f7;      /* cinza Apple */
  --bg-3:#fbfbfd;
  --line:#d2d2d7;      /* hairline */
  --line-2:#e8e8ed;
  --card:#ffffff;

  /* Acento da marca — usado com parcimônia */
  --accent:#6d3bdb; --accent-2:#7c3aed; --accent-ink:#5b21b6; --accent-wash:#f6f3ff; --accent-line:#e7defc;
  --link:#6d3bdb;

  /* Status (mudos, maduros) */
  --green:#1a7f37; --green-wash:#eaf6ee;
  --amber:#9a6700; --amber-wash:#fbf4e6;
  --red:#b3261e;   --red-wash:#fbecec;
  --cyan:#0a7ea4;  --blue:#1c63d4;
  /* DEM-52 — semáforo de prazo/urgência (4 níveis distintos) */
  --flag-green:var(--green);  --flag-green-wash:var(--green-wash);
  --flag-yellow:#8a6d00;      --flag-yellow-wash:#fff8db;
  --flag-orange:#c2410c;      --flag-orange-wash:#ffece0;
  --flag-red:var(--red);      --flag-red-wash:var(--red-wash);

  /* Gradientes — muito sutis (só onde fizer sentido) */
  --grad-brand:linear-gradient(135deg,#7c3aed,#9b5cf6);   /* logo/avatar apenas */
  --grad-hero:linear-gradient(180deg,#fbfbfd 0%,#ffffff 100%);
  --grad-wash:linear-gradient(180deg,#f5f5f7 0%,#ffffff 100%);

  /* Sombras — discretas */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 10px rgba(0,0,0,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08);
  --shadow-xl:0 24px 70px rgba(0,0,0,.12);

  /* Raio — Apple usa 12–28 */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-full:980px;

  /* Espaçamento (4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-section:120px;

  /* Tipografia — escala tensa estilo SF Pro Display */
  --fs-caption:.8125rem;   /* 13 */
  --fs-sm:.875rem;         /* 14 */
  --fs-base:1.0625rem;     /* 17 — corpo Apple */
  --fs-md:1.1875rem;       /* 19 */
  --fs-lg:1.5rem;          /* 24 */
  --fs-xl:2rem;            /* 32 */
  --fs-2xl:2.75rem;        /* 44 */
  --fs-3xl:clamp(2.6rem,5.5vw,4.2rem); /* hero */

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.22s var(--ease); --t-slow:.5s var(--ease-out);

  --maxw:1080px; --maxw-wide:1280px; --nav-h:48px;

  /* --- Aliases de compatibilidade (páginas v0 usam estes nomes em styles inline) --- */
  --purple:#7c3aed; --purple-l:#a78bfa; --purple-d:var(--accent-ink); --purple-50:var(--accent-wash); --purple-100:var(--accent-line);
  --green-50:var(--green-wash); --amber-50:var(--amber-wash); --red-50:var(--red-wash);
  --pink:var(--accent-2); --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --border:var(--line); --border-2:var(--line-2); --bg2:var(--bg-2);
  --grad-brand-soft:var(--grad-wash); --shadow-sm:var(--shadow-xs);
  --fs-xs:var(--fs-caption);
}

/* BackOffice — acento mais sóbrio (azul-petróleo) p/ diferenciar do app do cliente */
[data-app="backoffice"]{ --accent:#0a6e8f; --accent-2:#0a7ea4; --accent-ink:#075e79; --accent-wash:#eef7fb; --accent-line:#d4e9f1; --link:#0a6e8f; }

/* ============================================================
   Tema escuro (toggle no header da plataforma — D17). Tudo via
   tokens, então cards/grids/menus herdam automaticamente.
   ============================================================ */
[data-theme="dark"]{
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#9a9aa0; /* UX-S6: terciário mais legível no escuro */
  --bg:#161618; --bg-2:#202022; --bg-3:#1b1b1d;
  --line:#3a3a3d; --line-2:#2a2a2d; --card:#1e1e20;
  --accent:#8b5cf6; --accent-2:#a78bfa; --accent-ink:#c4b5fd; --accent-wash:#211a33; --accent-line:#352a52;
  --link:#a78bfa;
  --green:#3fb950; --green-wash:#13241a;
  --amber:#d29922; --amber-wash:#2a2210;
  --red:#f85149;   --red-wash:#2a1614;
  --cyan:#39c0d9;  --blue:#4d8df0;
  /* DEM-52 — semáforo de prazo (dark) */
  --flag-yellow:#e3c14e; --flag-yellow-wash:#26210f;
  --flag-orange:#f0883e; --flag-orange-wash:#2a1810;
  --grad-hero:linear-gradient(180deg,#1b1b1d 0%,#161618 100%);
  --grad-wash:linear-gradient(180deg,#202022 0%,#161618 100%);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 12px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.55); --shadow-xl:0 24px 70px rgba(0,0,0,.62);
}
/* BackOffice mantém o acento ciano também no escuro */
[data-theme="dark"][data-app="backoffice"]{ --accent:#39c0d9; --accent-2:#5ccfe6; --accent-ink:#8fdcec; --accent-wash:#0e2630; --accent-line:#1a3a47; --link:#5ccfe6; }
/* Barras translúcidas precisam de base escura (sobrescreve o branco fixo) */
[data-theme="dark"] .topbar{ background:rgba(22,22,24,.8); }
[data-theme="dark"] .subnav{ background:rgba(22,22,24,.86)!important; }
[data-theme="dark"] .nav{ background:rgba(22,22,24,.82); }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#48484c; border-color:var(--bg); }
[data-theme="dark"] .avatar-img{ background:var(--grad-brand); }
html{ background:var(--bg); }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:var(--fs-base);line-height:1.47;font-weight:400;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:var(--link);text-decoration:none;}a:hover{text-decoration:underline;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--accent-wash);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#c7c7cc;border-radius:99px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#a1a1a6;}
hr{border:none;border-top:1px solid var(--line);}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}