/*
 * Tokens e base visual do Planner.
 * Copiados do Design System do 4Broker OS (docs/04-design-system.md e
 * src/app/globals.css, versão 2.5), por decisão do dono do Planner.
 * Fonte da verdade continua sendo o 4Broker OS: ao mudar um token lá,
 * atualize aqui. Nada do 4Broker OS é alterado por este arquivo.
 * Sem logo, nome ou referências comerciais da 4Broker: só a linguagem visual.
 */
:root {
  color-scheme: light;

  --brand-950: #041734;
  --brand-900: #112655;
  --brand-600: #0047f2;
  --brand-400: #01a4fa;
  --brand-gradient: linear-gradient(135deg, #0047f2 0%, #01a4fa 100%);

  --background: #f3f6fb;
  --background-gradient:
    radial-gradient(1100px 520px at 72% -10%, rgb(54 108 245 / 8%), transparent 62%),
    linear-gradient(180deg, #f6f8fc 0%, #f1f4f9 45%, #edf1f7 100%);
  --topbar-surface: rgb(246 248 252 / 72%);
  --topbar-line: #dfe5ee;
  --control-glass: rgb(255 255 255 / 80%);
  --control-border: #e1e6ee;
  --avatar-bg: #e7ecf5;
  --avatar-text: #1b2331;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f8fafc;
  --border: #e3e8f0;
  --border-strong: #cbd5e1;
  --text-primary: #0e1520;
  --text-secondary: #4a5261;
  --text-muted: #6b7382;
  --primary: #2f63ea;
  --primary-hover: #2554d0;
  --primary-soft: #eaf0fe;
  --focus: rgb(54 108 245 / 30%);

  /* Progresso sempre em degradê análogo (DS §27.1). */
  --progress-primary-from: #4a6cf2;
  --progress-primary-to: #2798ee;
  --progress-success-from: #1e8f55;
  --progress-success-to: #1fa98c;
  --progress-warning-from: #a8792a;
  --progress-warning-to: #c49a2e;
  --progress-danger-from: #bd4a5a;
  --progress-danger-to: #d0644f;
  --progress-neutral-from: #c1cad8;
  --progress-neutral-to: #cfd6e1;

  --success: #1c8a52;
  --success-soft: #e8f7ef;
  --warning: #806326;
  --warning-soft: #fbf7eb;
  --danger: #b44747;
  --danger-hover: #993b3b;
  --danger-soft: #fbeded;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Mont primeiro; entra quando houver a webfont licenciada. */
  --font-family-sans: "Mont", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --font-size-h1: clamp(2rem, 4vw, 2.5rem);
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;

  --control-height-sm: 36px;
  --control-height-md: 44px;
  --shadow-sm: 0 2px 16px rgb(15 23 42 / 4%);
  --shadow-md: 0 12px 36px rgb(15 23 42 / 9%);
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #0a101a;
  --background-gradient:
    radial-gradient(1100px 520px at 72% -10%, rgb(54 108 245 / 7%), transparent 62%),
    linear-gradient(180deg, #0e131e 0%, #0a101a 45%, #080d16 100%);
  --topbar-surface: rgb(12 17 27 / 72%);
  --topbar-line: #1f2835;
  --control-glass: rgb(20 27 40 / 72%);
  --control-border: #222a3a;
  --surface: #111a27;
  --surface-raised: #151c27;
  --surface-subtle: #0d1420;
  --border: #1b2331;
  --border-strong: #283142;
  --text-primary: #f5f8fc;
  --text-secondary: #a8afbb;
  --text-muted: #858c9a;
  --primary: #366cf5;
  --primary-hover: #4c7fed;
  --primary-soft: rgb(54 108 245 / 16%);
  --focus: rgb(76 127 237 / 40%);
  --avatar-bg: #262d3b;
  --avatar-text: #f5f8fc;

  --progress-primary-from: #4a6bf5;
  --progress-primary-to: #33a0f5;
  --progress-success-from: #4cbb7c;
  --progress-success-to: #45c9ae;
  --progress-warning-from: #cfa052;
  --progress-warning-to: #dfae5c;
  --progress-danger-from: #de6b72;
  --progress-danger-to: #ea7c74;
  --progress-neutral-from: #313c4f;
  --progress-neutral-to: #3a465a;

  --success: #6bd298;
  --success-soft: rgb(107 210 152 / 12%);
  --warning: #e0b45e;
  --warning-soft: rgb(224 180 94 / 12%);
  --danger: #ef7d7d;
  --danger-hover: #f59a9a;
  --danger-soft: rgb(239 125 125 / 12%);

  --shadow-sm: 0 6px 24px rgb(0 0 0 / 22%);
  --shadow-md: 0 16px 42px rgb(0 0 0 / 36%);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { background-color: var(--background); }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--background);
  background-image: var(--background-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-standard) var(--ease-standard), color var(--motion-standard) var(--ease-standard);
}
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--primary-soft); color: var(--text-primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Degradês de progresso. Horizontal: da esquerda para a ponta. Vertical (-v): de baixo para o topo. */
.bg-progress-primary { background-image: linear-gradient(90deg, var(--progress-primary-from), var(--progress-primary-to)); }
.bg-progress-success { background-image: linear-gradient(90deg, var(--progress-success-from), var(--progress-success-to)); }
.bg-progress-warning { background-image: linear-gradient(90deg, var(--progress-warning-from), var(--progress-warning-to)); }
.bg-progress-danger { background-image: linear-gradient(90deg, var(--progress-danger-from), var(--progress-danger-to)); }
.bg-progress-neutral { background-image: linear-gradient(90deg, var(--progress-neutral-from), var(--progress-neutral-to)); }
.bg-progress-primary-v { background-image: linear-gradient(0deg, var(--progress-primary-from), var(--progress-primary-to)); }

@keyframes app-spin { to { transform: rotate(360deg); } }
@keyframes app-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes soft-glow {
  0%, 100% { filter: drop-shadow(0 0 0 color-mix(in oklab, var(--glow, var(--primary)) 0%, transparent)); }
  50% { filter: drop-shadow(0 0 7px color-mix(in oklab, var(--glow, var(--primary)) 45%, transparent)); }
}
.glow-pulse { animation: soft-glow 2.4s var(--ease-standard) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}