/* ==========================================================================
   REGINA LAFER · DESIGN SYSTEM
   tokens.css — Fonte única de verdade (Design Tokens)
   --------------------------------------------------------------------------
   Marca: Regina Lafer · Terapeuta
   Azul primário oficial: #0f5dbf · Preto: #000000 · Branco: #ffffff
   Tipografia oficial: Great Vibes (display) + Roboto (texto)

   Princípios visuais:
   - Acolhedor, calmo, profissional, humano, confiável, moderno (não frio)
   - Evitar: aparência hospitalar, infantil, SaaS genérico, cores vibrantes,
     layout poluído
   Estratégia: usar o azul da marca como ACENTO de confiança, apoiado por
   neutros QUENTES (não cinzas clínicos), espaçamento generoso, cantos
   suaves e sombras difusas de baixa intensidade.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. CORES PRIMITIVAS — A marca
     ---------------------------------------------------------------------- */

  /* Cores oficiais da marca (Manual da Marca) */
  --brand-blue: #0f5dbf;   /* Azul primário · RGB 15 93 191 */
  --brand-black: #000000;  /* Preto secundário */
  --brand-white: #ffffff;  /* Branco */

  /* ---- Escala Primária (Azul) ----------------------------------------
     Derivada de #0f5dbf (500). Tons claros = superfícies calmas;
     tons profundos (900/950) = "azul-noite" sereno para temas escuros,
     rodapés e textos de destaque. */
  --blue-50:  #eef4fc;
  --blue-100: #d8e6f8;
  --blue-200: #b3cdf0;
  --blue-300: #82abe4;
  --blue-400: #4a82d4;
  --blue-500: #0f5dbf;   /* ← cor da marca */
  --blue-600: #0d4ea3;
  --blue-700: #0c4087;
  --blue-800: #0b356e;
  --blue-900: #0a2a55;
  --blue-950: #061a36;

  /* ---- Neutros QUENTES -------------------------------------------------
     Intencionalmente quentes (leve matiz terroso) para fugir do aspecto
     clínico/hospitalar dos cinzas frios. Branco "puro" só quando
     necessário; o fundo padrão é um marfim suave. */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf9f7;  /* marfim — fundo padrão da aplicação */
  --neutral-100: #f3f1ec;
  --neutral-200: #e7e3db;
  --neutral-300: #d6d1c6;
  --neutral-400: #aca69a;
  --neutral-500: #837d70;
  --neutral-600: #615c52;
  --neutral-700: #46423a;
  --neutral-800: #2d2a25;
  --neutral-900: #1b1916;  /* quase-preto quente — texto principal */

  /* ---- Acento de apoio (Sálvia/Teal suave) ----------------------------
     Cor DERIVADA (não consta no manual), usada com parcimônia em tags,
     ilustrações e micro-destaques. Justificativa: harmoniza com o azul,
     evoca calma, natureza e transformação (tema cérebro+borboleta), sem
     ser vibrante. Documentada de forma transparente como cor de apoio. */
  --sage-50:  #eef4f2;
  --sage-100: #d8e7e2;
  --sage-200: #b3cfc7;
  --sage-300: #87b1a8;
  --sage-400: #5f938a;
  --sage-500: #4a7d74;
  --sage-600: #3c655e;
  --sage-700: #314f4a;

  /* ---- Cores de feedback (dessaturadas, não-alarmantes) --------------- */
  --green-50:  #e9f4ee;  --green-500: #3f8f6b;  --green-700: #2c6a4d;
  --amber-50:  #f8efda;  --amber-500: #b5862f;  --amber-700: #8a6420;
  --red-50:    #f9e9e7;  --red-500:   #c0524b;  --red-700:   #97403a;


  /* ----------------------------------------------------------------------
     2. TOKENS SEMÂNTICOS — papéis (tema claro)
     Use SEMPRE estes nos componentes, nunca as primitivas diretamente.
     ---------------------------------------------------------------------- */

  /* Superfícies e fundos */
  --color-bg:            var(--neutral-50);   /* fundo geral do app */
  --color-surface:       var(--neutral-0);    /* cartões, painéis */
  --color-surface-sunken:var(--neutral-100);  /* áreas recuadas */
  --color-surface-raised:var(--neutral-0);    /* elementos flutuantes */
  --color-overlay:       rgba(10, 42, 85, 0.45); /* fundo de modal */

  /* Texto */
  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-500);
  --color-text-on-brand: var(--neutral-0);
  --color-text-inverse:  var(--neutral-0);
  --color-text-link:     var(--blue-600);
  --color-text-link-hover: var(--blue-700);

  /* Bordas e divisores */
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-divider:       var(--neutral-200);

  /* Marca / primária (ações principais) */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-subtle: var(--blue-50);   /* fundo suave */
  --color-primary-muted:  var(--blue-100);
  --color-on-primary:     var(--neutral-0);

  /* Secundária (preto/neutro da marca) */
  --color-secondary:        var(--neutral-900);
  --color-secondary-hover:  var(--neutral-800);
  --color-secondary-active: #000000;
  --color-on-secondary:     var(--neutral-0);

  /* Acento (sálvia) */
  --color-accent:        var(--sage-500);
  --color-accent-subtle: var(--sage-50);
  --color-on-accent:     var(--neutral-0);

  /* Feedback */
  --color-success:        var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-danger:         var(--red-500);
  --color-danger-subtle:  var(--red-50);
  --color-info:           var(--blue-500);
  --color-info-subtle:    var(--blue-50);

  /* Foco (acessibilidade) */
  --color-focus-ring: rgba(15, 93, 191, 0.45);

  /* Disabled */
  --color-disabled-bg:   var(--neutral-100);
  --color-disabled-text: var(--neutral-400);
  --color-disabled-border: var(--neutral-200);


  /* ----------------------------------------------------------------------
     3. TIPOGRAFIA
     ---------------------------------------------------------------------- */
  --font-display: 'Great Vibes', 'Segoe Script', cursive;  /* assinatura */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Escala tipográfica — modular ~1.2 (terça menor) para ritmo calmo */
  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px — reservado p/ Great Vibes display */
  --text-6xl:  4.5rem;    /* 72px */

  /* Pesos (Roboto) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* Altura de linha */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;   /* corpo — generoso p/ leitura calma */
  --leading-relaxed: 1.8;

  /* Espaçamento entre letras */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* rótulos em caixa-alta (ex: "TERAPEUTA") */


  /* ----------------------------------------------------------------------
     4. ESPAÇAMENTO — base 4px (respiro generoso)
     ---------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Larguras de leitura / contêineres */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --measure:       68ch;  /* largura ideal de texto corrido */


  /* ----------------------------------------------------------------------
     5. BORDAS E RAIOS — cantos suaves (acolhedor, não clínico)
     ---------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --border-width:     1px;
  --border-width-2:   2px;


  /* ----------------------------------------------------------------------
     6. SOMBRAS — difusas, suaves, com leve tinta azulada (coesão)
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 42, 85, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 42, 85, 0.08), 0 1px 2px rgba(10, 42, 85, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 42, 85, 0.08), 0 2px 4px rgba(10, 42, 85, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 42, 85, 0.10), 0 4px 8px rgba(10, 42, 85, 0.05);
  --shadow-xl: 0 24px 48px rgba(10, 42, 85, 0.14), 0 8px 16px rgba(10, 42, 85, 0.06);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);
  --shadow-inner: inset 0 1px 2px rgba(10, 42, 85, 0.06);


  /* ----------------------------------------------------------------------
     7. MOVIMENTO — transições suaves e calmas
     ---------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   360ms;


  /* ----------------------------------------------------------------------
     8. CAMADAS (z-index)
     ---------------------------------------------------------------------- */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-toast:    1400;
  --z-tooltip:  1500;
}


/* ==========================================================================
   TEMA ESCURO — "Azul-noite" sereno (sereno, não preto duro)
   Ativar com:  <html data-theme="dark">  ou  .theme-dark
   ========================================================================== */
[data-theme="dark"],
.theme-dark {
  --color-bg:             #050d1a;   /* azul-noite profundo (mais escuro) */
  --color-surface:        #0c1d35;
  --color-surface-sunken: #081628;
  --color-surface-raised: #11253f;
  --color-overlay:        rgba(2, 8, 18, 0.72);

  --color-text:          #eaf1fb;
  --color-text-muted:    #a6bcd9;
  --color-text-subtle:   #768fb0;
  --color-text-on-brand: var(--neutral-0);
  --color-text-inverse:  var(--neutral-900);
  --color-text-link:     #7db0ee;
  --color-text-link-hover:#a8caf3;

  --color-border:        #17314f;
  --color-border-strong: #244164;
  --color-divider:       #17314f;

  --color-primary:        var(--blue-400);
  --color-primary-hover:  var(--blue-300);
  --color-primary-active: var(--blue-200);
  --color-primary-subtle: rgba(74, 130, 212, 0.14);
  --color-primary-muted:  rgba(74, 130, 212, 0.24);
  --color-on-primary:     var(--blue-950);

  --color-secondary:        var(--neutral-100);
  --color-secondary-hover:  var(--neutral-0);
  --color-on-secondary:     var(--blue-950);

  --color-accent:        var(--sage-300);
  --color-accent-subtle: rgba(135, 177, 168, 0.16);
  --color-on-accent:     var(--blue-950);

  --color-success-subtle: rgba(63, 143, 107, 0.18);
  --color-warning-subtle: rgba(181, 134, 47, 0.18);
  --color-danger-subtle:  rgba(192, 82, 75, 0.18);
  --color-info-subtle:    rgba(74, 130, 212, 0.16);

  --color-disabled-bg:   #102b4e;
  --color-disabled-text: #5a749a;
  --color-disabled-border:#1c3a60;

  --color-focus-ring: rgba(125, 176, 238, 0.5);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.46), 0 4px 8px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.34);
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}