/* =========================================================
 * Design Tokens — Klyver v4 (Azul Klyver + Ciano)
 * Paleta extraída da logo oficial (docs/brand/klyver):
 * painel azul Klyver → azul-marinho, ação principal azul Klyver,
 * realces ciano/turquesa do "K", superfícies brancas e tinta azul-ardósia.
 * Ver docs/specs/features/farmacia-estoque-inteligente/v1/design_system.md
 * ========================================================= */

:root {
  color-scheme: light;

  /* Tipografia */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-brand: 'Montserrat', var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Superfícies */
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-sunken: #eef2f6;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --overlay: rgba(17, 27, 46, 0.45);

  /* Tinta (azul-ardósia) */
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #7b8799;
  --ink-inverse: #ffffff;

  /* Linhas */
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);

  /* Marca Klyver: azul-marinho da logo + painel azul Klyver */
  --forest: #111b2e;
  --forest-2: #1a2a47;
  --forest-3: #1d4ff0;
  --brand-gradient: linear-gradient(160deg, #1d3fb8 0%, #142a6e 45%, #0f1a3a 100%);
  --brand-k-gradient: linear-gradient(135deg, #2b7bff 0%, #0cc0e8 55%, #00e0c6 100%); /* degradê do "K" */

  /* Ação principal: azul Klyver (o nome "lime" é mantido por compatibilidade) */
  --lime: #1d4ff0;
  --lime-2: #1a3fd0;
  --lime-ink: #ffffff;
  --accent-bright: #3ee8d2; /* turquesa do "K" para ícones/textos sobre fundo escuro */
  --mint: #0cc0e8;
  --mint-soft: #dbf6fc;

  /* Semânticas */
  --danger: #e5484d;
  --danger-ink: #b4262b;
  --danger-soft: #fdecec;
  --warning: #e8a317;
  --warning-ink: #9a6400;
  --warning-soft: #fdf3dc;
  --info: #3b82f6;
  --info-ink: #1d4ed8;
  --info-soft: #e7efff;
  --success: #059669;
  --success-ink: #047857;
  --success-soft: #dcf5ea;

  /* Raios */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Sombras em camadas (azul-marinho, nunca preto puro) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 14px 34px -14px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 30px 70px -26px rgba(15, 23, 42, 0.32);
  --ring: 0 0 0 3px rgba(29, 79, 240, 0.35), 0 0 0 1px var(--lime);
  --ring-soft: 0 0 0 4px rgba(29, 79, 240, 0.22);

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* Layout */
  --container: 1240px;
  --gutter: 16px;
  --topbar-h: 68px;
  --bottom-nav-space: 84px;
  --chat-bottom-gap: 12px;
  --demo-banner-height: 46px;
  --demo-banner-margin: 8px;
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

/* Tema escuro: o azul-marinho do painel vira o fundo do sistema */
:root[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #0a1320;
  --surface: #101b2b;
  --surface-2: #142236;
  --surface-sunken: #0c1624;
  --surface-glass: rgba(16, 27, 43, 0.78);
  --overlay: rgba(2, 8, 18, 0.66);

  --ink: #e6edf5;
  --ink-2: #9fb0c3;
  --ink-3: #6b7d92;

  --line: rgba(148, 178, 210, 0.1);
  --line-strong: rgba(148, 178, 210, 0.18);

  --forest: #15264a;
  --forest-2: #1c3260;
  --forest-3: #3ee8d2;
  --lime: #3d6bff;
  --lime-2: #2f5cf5;
  --mint-soft: rgba(12, 192, 232, 0.14);

  --danger-ink: #ff8589;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --warning-ink: #f5c35a;
  --warning-soft: rgba(232, 163, 23, 0.14);
  --info-ink: #93b8ff;
  --info-soft: rgba(59, 130, 246, 0.16);
  --success: #10b981;
  --success-ink: #5fd6a4;
  --success-soft: rgba(16, 185, 129, 0.15);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75);
}