/*
 * Valcann brand theme — Light mode (white background).
 * ---------------------------------------------------------------------------
 * Framework-agnostic global stylesheet defining the SPA design tokens as CSS
 * custom properties, derived from the Valcann logo, per design.md section
 * "Identidade Visual e Tema (Light)". Later SPA screens (tasks 13.1–13.5)
 * import this file to inherit the brand look.
 *
 * Token set:
 *   Backgrounds/surfaces : --color-bg, --color-surface, --color-border
 *   Brand purple (primary): --color-primary, --color-primary-hover,
 *                           --color-primary-tint
 *   Cyan accent          : --color-accent (fills/focus),
 *                           --color-accent-text (WCAG-safe text on white)
 *   Support blue         : --color-blue
 *   Brand gradient       : --gradient-brand (cyan -> blue -> purple)
 *   Text                 : --color-text, --color-text-secondary,
 *                           --color-text-disabled
 *   Semantic             : --color-success, --color-warning, --color-error,
 *                           --color-info
 *
 * Accessibility: targets WCAG AA (>= 4.5:1 normal text, >= 3:1 large text/UI).
 * Pure cyan (#29B6E8) has low contrast on white, so it is reserved for accents
 * and chart fills; text/links use purple (--color-primary) or the darker cyan
 * (--color-accent-text). Primary buttons use purple + white text (high
 * contrast). The focus ring uses cyan.
 *
 * NOTE: The EPI·USE red in the logo signature ("An EPI·USE company") is NOT a
 * UI color. Error states use --color-error (#D64545), independent of that red.
 */

:root {
  /* Fundos e superfícies */
  --color-bg: #FFFFFF;
  --color-surface: #F5F6F9;
  --color-border: #E4E7EE;

  /* Marca — roxo (primária) */
  --color-primary: #4B2A87;
  --color-primary-hover: #3A2069;
  --color-primary-tint: #EFEAF7;

  /* Acento — ciano */
  --color-accent: #29B6E8;        /* fills de gráfico / anel de foco */
  --color-accent-text: #1E93C4;   /* variação escura para texto/links sobre branco */

  /* Azul de apoio */
  --color-blue: #2C6FBE;

  /* Gradiente da chama do logo */
  --gradient-brand: linear-gradient(90deg, #29B6E8, #2C6FBE, #4B2A87);

  /* Texto */
  --color-text: #1E2230;
  --color-text-secondary: #5B6270;
  --color-text-disabled: #9AA0AE;

  /* Semânticas */
  --color-success: #2E9E5B;
  --color-warning: #E0A100;
  --color-error: #D64545;
  --color-info: #29B6E8;

  /* Escala espacial e raio base (apoio à UI) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --focus-ring-width: 2px;
}

/* --------------------------------------------------------------------------
 * Base (light mode)
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Superfícies elevadas (cards, painéis) */
.surface {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
 * Links
 * Usa roxo (ou ciano escuro) para manter contraste sobre branco.
 * ------------------------------------------------------------------------ */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

a.accent {
  color: var(--color-accent-text);
}

/* --------------------------------------------------------------------------
 * Botões
 * Primário  : fundo roxo + texto branco (alto contraste).
 * Secundário: fundo branco + borda e texto roxo.
 * ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-primary-tint);
}

/* --------------------------------------------------------------------------
 * Anel de foco (focus ring) — ciano.
 * ------------------------------------------------------------------------ */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Utilitários de marca e semântica
 * ------------------------------------------------------------------------ */
.text-secondary {
  color: var(--color-text-secondary);
}

.text-disabled {
  color: var(--color-text-disabled);
}

.brand-gradient {
  background-image: var(--gradient-brand);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

/* Realce/seleção sutil */
.tint {
  background-color: var(--color-primary-tint);
}