/*==============================================================================
  AgendaZ — Tokens

  Toda a identidade visual esta definida aqui, uma vez so, como custom
  properties. Nada abaixo deste arquivo pode fixar uma cor, um raio, uma sombra
  ou uma duracao na mao.

  Tres camadas, nesta ordem:

    1. Primitivas   escalas cruas. Nunca referenciadas por um componente.
    2. Semanticas   significado ("superficie", "perigo"). O que os componentes usam.
    3. Temas        claro/escuro remapeiam as semanticas. Os componentes nao mudam.

  E isso que faz a paridade claro/escuro ser estrutural em vez de um trabalho
  manual por componente: um componente que so le tokens semanticos ja nasce
  correto nos dois temas, e um tema novo e um bloco de sobrescritas.
==============================================================================*/

:root {
    /*--------------------------------------------------------------------------
      1. PRIMITIVAS
    --------------------------------------------------------------------------*/

    /* Marca — o roxo do AgendaZ. O tom 700 (#130a78) e a cor historica do
       sistema; a escala foi construida ao redor dele para que exista contraste
       suficiente tanto no tema claro quanto no escuro. */
    --w-brand-50:  #eeecfa;
    --w-brand-100: #ddd9f5;
    --w-brand-200: #bdb5ec;
    --w-brand-300: #9a8ee0;
    --w-brand-400: #7a6ad3;
    --w-brand-500: #5b48c2;
    --w-brand-600: #3a26a2;
    --w-brand-700: #130a78;
    --w-brand-800: #0f0861;
    --w-brand-900: #0b0649;
    --w-brand-950: #070432;

    /* Neutros levemente frios, para as superficies lerem como "software" e nao
       como papel. */
    --w-gray-0:   #ffffff;
    --w-gray-25:  #fcfcfd;
    --w-gray-50:  #f8f9fc;
    --w-gray-100: #f1f3f9;
    --w-gray-200: #e4e7f0;
    --w-gray-300: #cfd4e2;
    --w-gray-400: #9aa3b8;
    --w-gray-500: #6b7488;
    --w-gray-600: #4d5566;
    --w-gray-700: #3a4152;
    --w-gray-800: #252b38;
    --w-gray-850: #1c212c;
    --w-gray-900: #151922;
    --w-gray-950: #0e1116;

    /* Status e categorias. Cada um tem variante clara e escura, para nada
       precisar ser recalculado na hora de trocar de tema. */
    --w-emerald-400: #34d399; --w-emerald-500: #10b981; --w-emerald-600: #059669;
    --w-amber-400:   #fbbf24; --w-amber-500:   #f59e0b; --w-amber-600:   #d97706;
    --w-rose-400:    #fb7185; --w-rose-500:    #f43f5e; --w-rose-600:    #e11d48;
    --w-blue-400:    #60a5fa; --w-blue-500:    #3b82f6; --w-blue-600:    #2563eb;
    --w-violet-400:  #a78bfa; --w-violet-500:  #8b5cf6; --w-violet-600:  #7c3aed;
    --w-cyan-400:    #22d3ee; --w-cyan-500:    #06b6d4; --w-cyan-600:    #0891b2;
    --w-orange-400:  #fb923c; --w-orange-500:  #f97316; --w-orange-600:  #ea580c;
    --w-teal-400:    #2dd4bf; --w-teal-500:   #14b8a6; --w-teal-600:    #0d9488;
    --w-indigo-400:  #818cf8; --w-indigo-500:  #6366f1; --w-indigo-600:  #4f46e5;
    --w-slate-400:   #94a3b8; --w-slate-500:   #64748b; --w-slate-600:   #475569;

    /*--------------------------------------------------------------------------
      Primitivas dimensionais — independentes de tema
    --------------------------------------------------------------------------*/

    /* Base de 4px. Todo espacamento do produto e um multiplo, entao o ritmo
       vertical sai automatico em vez de ser negociado tela a tela. */
    --w-space-0: 0;
    --w-space-1: 0.25rem;
    --w-space-2: 0.5rem;
    --w-space-3: 0.75rem;
    --w-space-4: 1rem;
    --w-space-5: 1.25rem;
    --w-space-6: 1.5rem;
    --w-space-8: 2rem;
    --w-space-10: 2.5rem;
    --w-space-12: 3rem;
    --w-space-16: 4rem;

    --w-radius-xs: 4px;
    --w-radius-sm: 6px;
    --w-radius-md: 8px;
    --w-radius-lg: 12px;
    --w-radius-xl: 16px;
    --w-radius-full: 9999px;

    --w-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
    --w-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --w-text-2xs: 0.6875rem;
    --w-text-xs:  0.75rem;
    --w-text-sm:  0.8125rem;
    --w-text-base: 0.875rem;   /* interface densa: o corpo e 14px, nao 16px */
    --w-text-md:  0.9375rem;
    --w-text-lg:  1.0625rem;
    --w-text-xl:  1.25rem;
    --w-text-2xl: 1.5rem;
    --w-text-3xl: 1.875rem;

    --w-weight-normal: 400;
    --w-weight-medium: 500;
    --w-weight-semibold: 600;
    --w-weight-bold: 700;

    --w-leading-tight: 1.25;
    --w-leading-normal: 1.5;
    --w-leading-relaxed: 1.7;

    /* Movimento curto e desacelerado: o sistema tem de parecer instantaneo.
       Acima de 300ms a animacao le como lentidao, nao como acabamento. */
    --w-duration-instant: 80ms;
    --w-duration-fast: 140ms;
    --w-duration-normal: 220ms;
    --w-duration-slow: 340ms;
    --w-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --w-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --w-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Constantes de layout compartilhadas entre CSS e JS. */
    --w-topbar-height: 58px;
    --w-sidebar-width: 262px;
    --w-sidebar-collapsed: 68px;
    --w-content-max: 1600px;

    /* Ordem de empilhamento, declarada uma vez para nenhum componente inventar
       um z-index proprio. */
    --w-z-base: 1;
    --w-z-sticky: 100;
    --w-z-sidebar: 200;
    --w-z-topbar: 300;
    --w-z-dropdown: 400;
    --w-z-drawer: 500;
    --w-z-modal: 600;
    --w-z-toast: 700;
    --w-z-tooltip: 800;
}

/*==============================================================================
  2 + 3. SEMANTICAS, por tema

  `:root` carrega o claro. `[data-theme="dark"]` sobrescreve. O atributo e
  escrito pelo servidor a partir do cookie, entao o tema correto ja esta no HTML
  no primeiro paint — nao existe piscada de tema errado.
==============================================================================*/

:root,
[data-theme='light'] {
    color-scheme: light;

    /* Superficies, do fundo para a frente */
    --w-canvas:          var(--w-gray-50);
    --w-surface:         var(--w-gray-0);
    --w-surface-sunken:  var(--w-gray-100);
    --w-surface-raised:  var(--w-gray-0);
    --w-surface-overlay: var(--w-gray-0);
    --w-surface-hover:   var(--w-gray-100);
    --w-surface-active:  var(--w-gray-200);
    --w-surface-selected: var(--w-brand-50);

    /*
     * A sidebar, como paleta propria.
     *
     * O painel continua escuro nos dois temas: ele e moldura, nao conteudo, e
     * uma borda constante da ao olho um ponto fixo enquanto a area de trabalho
     * inverte.
     *
     * Sao cinco tokens em vez de uma cor porque um painel escuro nos dois temas
     * nao pode emprestar os tokens de texto da pagina — texto sobre roxo
     * profundo precisa das proprias decisoes de contraste.
     */
    --w-sidebar-solid:     #130a78;
    --w-sidebar-fg:        rgba(255, 255, 255, 0.82);
    --w-sidebar-fg-strong: #ffffff;
    --w-sidebar-hover:     rgba(255, 255, 255, 0.10);
    --w-sidebar-active-bg: #ffffff;
    --w-sidebar-active-fg: #130a78;
    --w-sidebar-child-fg:  rgba(255, 255, 255, 0.64);
    --w-topbar-bg:         rgba(255, 255, 255, 0.88);

    /* Texto */
    --w-text-primary:   var(--w-gray-900);
    --w-text-secondary: var(--w-gray-600);
    --w-text-tertiary:  var(--w-gray-500);
    --w-text-disabled:  var(--w-gray-400);
    --w-text-inverse:   var(--w-gray-0);
    --w-text-brand:     var(--w-brand-700);
    --w-text-link:      var(--w-brand-700);

    /* Bordas */
    --w-border:        var(--w-gray-200);
    --w-border-strong: var(--w-gray-300);
    --w-border-subtle: var(--w-gray-100);
    --w-border-focus:  var(--w-brand-600);

    /* Interativo — o roxo historico do AgendaZ e a cor primaria. */
    --w-accent:          #130a78;
    --w-accent-hover:    var(--w-brand-800);
    --w-accent-active:   var(--w-brand-900);
    --w-accent-subtle:   var(--w-brand-50);
    --w-accent-contrast: #ffffff;

    /* Status: `-fg` sobre `-bg` passa em AA nos dois temas. */
    --w-success:    var(--w-emerald-600);
    --w-success-bg: #ecfdf5;
    --w-success-fg: #065f46;
    --w-warning:    var(--w-amber-600);
    --w-warning-bg: #fffbeb;
    --w-warning-fg: #92400e;
    --w-danger:     var(--w-rose-600);
    --w-danger-bg:  #fff1f2;
    --w-danger-fg:  #9f1239;
    --w-info:       var(--w-blue-600);
    --w-info-bg:    #eff6ff;
    --w-info-fg:    #1e40af;

    /* Tokens categoricos. Series de grafico e etiquetas de status usam estes
       nomes, nunca um hex — e o que mantem um grafico legivel nos dois temas
       sem nenhum trabalho extra. */
    --w-token-neutral: var(--w-gray-500);
    --w-token-slate:   var(--w-slate-600);
    --w-token-blue:    var(--w-blue-600);
    --w-token-indigo:  var(--w-indigo-600);
    --w-token-violet:  var(--w-violet-600);
    --w-token-cyan:    var(--w-cyan-600);
    --w-token-emerald: var(--w-emerald-600);
    --w-token-amber:   var(--w-amber-600);
    --w-token-orange:  var(--w-orange-600);
    --w-token-rose:    var(--w-rose-600);
    --w-token-teal:    var(--w-teal-600);

    --w-token-neutral-bg: var(--w-gray-100);
    --w-token-slate-bg:   #f1f5f9;
    --w-token-blue-bg:    #eff6ff;
    --w-token-indigo-bg:  #eef2ff;
    --w-token-violet-bg:  #f5f3ff;
    --w-token-cyan-bg:    #ecfeff;
    --w-token-emerald-bg: #ecfdf5;
    --w-token-amber-bg:   #fffbeb;
    --w-token-orange-bg:  #fff7ed;
    --w-token-rose-bg:    #fff1f2;
    --w-token-teal-bg:    #f0fdfa;

    /* Elevacao. No tema claro a separacao e feita por sombra. */
    --w-shadow-xs: 0 1px 2px rgba(16, 20, 30, 0.05);
    --w-shadow-sm: 0 1px 3px rgba(16, 20, 30, 0.08), 0 1px 2px rgba(16, 20, 30, 0.04);
    --w-shadow-md: 0 4px 12px rgba(16, 20, 30, 0.08), 0 2px 4px rgba(16, 20, 30, 0.04);
    --w-shadow-lg: 0 12px 28px rgba(16, 20, 30, 0.12), 0 4px 8px rgba(16, 20, 30, 0.06);
    --w-shadow-xl: 0 24px 48px rgba(16, 20, 30, 0.16);
    --w-shadow-focus: 0 0 0 3px rgba(19, 10, 120, 0.22);

    --w-scrollbar-thumb: var(--w-gray-300);
    --w-scrollbar-track: transparent;

    --w-skeleton-base: var(--w-gray-100);
    --w-skeleton-shine: var(--w-gray-200);
}

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

    --w-canvas:          var(--w-gray-950);
    --w-surface:         var(--w-gray-900);
    --w-surface-sunken:  var(--w-gray-950);
    --w-surface-raised:  var(--w-gray-850);
    --w-surface-overlay: var(--w-gray-850);
    --w-surface-hover:   rgba(255, 255, 255, 0.05);
    --w-surface-active:  rgba(255, 255, 255, 0.09);
    --w-surface-selected: rgba(122, 106, 211, 0.16);

    /*
     * No tema escuro o painel fica quase preto com um fundo de roxo, em vez do
     * roxo cheio: roxo saturado contra uma pagina escura le como uma segunda
     * superficie competindo com o conteudo. O item ativo tambem deixa de ser
     * branco puro — sobre quase preto isso vira brilho, nao destaque.
     */
    --w-sidebar-solid:     #16123a;
    --w-sidebar-fg:        rgba(255, 255, 255, 0.74);
    --w-sidebar-fg-strong: #ffffff;
    --w-sidebar-hover:     rgba(255, 255, 255, 0.07);
    --w-sidebar-active-bg: var(--w-brand-500);
    --w-sidebar-active-fg: #ffffff;
    --w-sidebar-child-fg:  rgba(255, 255, 255, 0.56);
    --w-topbar-bg:         rgba(21, 25, 34, 0.88);

    --w-text-primary:   #e9ecf3;
    --w-text-secondary: #a4acbd;
    --w-text-tertiary:  #7b8496;
    --w-text-disabled:  #565e6f;
    --w-text-inverse:   var(--w-gray-950);
    --w-text-brand:     var(--w-brand-300);
    --w-text-link:      var(--w-brand-300);

    --w-border:        rgba(255, 255, 255, 0.10);
    --w-border-strong: rgba(255, 255, 255, 0.18);
    --w-border-subtle: rgba(255, 255, 255, 0.06);
    --w-border-focus:  var(--w-brand-400);

    /* Acento mais claro no escuro: #130a78 sobre uma superficie quase preta nao
       tem contraste suficiente para texto nem para foco. */
    --w-accent:          var(--w-brand-500);
    --w-accent-hover:    var(--w-brand-400);
    --w-accent-active:   var(--w-brand-300);
    --w-accent-subtle:   rgba(122, 106, 211, 0.18);
    --w-accent-contrast: #ffffff;

    --w-success:    var(--w-emerald-400);
    --w-success-bg: rgba(16, 185, 129, 0.14);
    --w-success-fg: #6ee7b7;
    --w-warning:    var(--w-amber-400);
    --w-warning-bg: rgba(245, 158, 11, 0.14);
    --w-warning-fg: #fcd34d;
    --w-danger:     var(--w-rose-400);
    --w-danger-bg:  rgba(244, 63, 94, 0.14);
    --w-danger-fg:  #fda4af;
    --w-info:       var(--w-blue-400);
    --w-info-bg:    rgba(59, 130, 246, 0.14);
    --w-info-fg:    #93c5fd;

    --w-token-neutral: var(--w-gray-400);
    --w-token-slate:   var(--w-slate-400);
    --w-token-blue:    var(--w-blue-400);
    --w-token-indigo:  var(--w-indigo-400);
    --w-token-violet:  var(--w-violet-400);
    --w-token-cyan:    var(--w-cyan-400);
    --w-token-emerald: var(--w-emerald-400);
    --w-token-amber:   var(--w-amber-400);
    --w-token-orange:  var(--w-orange-400);
    --w-token-rose:    var(--w-rose-400);
    --w-token-teal:    var(--w-teal-400);

    --w-token-neutral-bg: rgba(154, 163, 184, 0.14);
    --w-token-slate-bg:   rgba(148, 163, 184, 0.14);
    --w-token-blue-bg:    rgba(96, 165, 250, 0.14);
    --w-token-indigo-bg:  rgba(129, 140, 248, 0.14);
    --w-token-violet-bg:  rgba(167, 139, 250, 0.14);
    --w-token-cyan-bg:    rgba(34, 211, 238, 0.14);
    --w-token-emerald-bg: rgba(52, 211, 153, 0.14);
    --w-token-amber-bg:   rgba(251, 191, 36, 0.14);
    --w-token-orange-bg:  rgba(251, 146, 60, 0.14);
    --w-token-rose-bg:    rgba(251, 113, 133, 0.14);
    --w-token-teal-bg:    rgba(45, 212, 191, 0.14);

    /* No escuro a separacao vem de superficies mais claras, nao de sombra —
       sombra sobre quase preto e praticamente invisivel e o resultado fica
       chapado. */
    --w-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --w-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --w-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --w-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
    --w-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7);
    --w-shadow-focus: 0 0 0 3px rgba(122, 106, 211, 0.4);

    --w-scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --w-scrollbar-track: transparent;

    --w-skeleton-base: rgba(255, 255, 255, 0.05);
    --w-skeleton-shine: rgba(255, 255, 255, 0.1);
}

/*==============================================================================
  Acessibilidade
==============================================================================*/

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