/**
 * Maestro — Design Tokens (CSS Variables)
 *
 * Uso:  importe este arquivo uma vez e consuma as variáveis:
 *       color: var(--color-text-base);
 *       background: var(--color-bg-container);
 *       border-radius: var(--radius-base);
 *
 * Valores extraídos das variáveis reais do arquivo
 * "Maestro — Design System (base Ant Design Vue).fig" (modo Light — canônico).
 * Dark mode: pendente (bloco no fim, comentado).
 */

:root {
  /* ---------- Semânticas (consuma estas) ---------- */

  /* Marca / estado */
  --color-primary: #0079CC;
  --color-info:    #0079CC;
  --color-link:    #0079CC;
  --color-success: #0BDBA9; /* teal */
  --color-warning: #FF813A; /* laranja */
  --color-error:   #FD6A63; /* coral */

  /* Texto */
  --color-text-base:      #001737;
  --color-text-secondary: #5E768D;
  --color-text-tertiary:  #93A8C5;
  --color-text-highlight: #0079CC;

  /* Bordas */
  --color-border-default:   #C4CFDE;
  --color-border-secondary: #E4EBF4;

  /* Superfícies */
  --color-bg-container: #FFFFFF;
  --color-bg-layout:    #E4EBF4;

  /* Forma */
  --radius-sm:   8px;
  --radius-base: 8px;
  --radius-lg:   20px;

  /* Espaçamento */
  --spacing-default: 15px;
  --spacing-global:  16px;

  /* Tipografia */
  --font-family-brand:   "Inter", -apple-system, system-ui, sans-serif;
  --font-family-product: "Nunito Sans", "Inter", -apple-system, system-ui, sans-serif;
  --font-family-base:    var(--font-family-product);

  --font-size-tiny:   10px;
  --font-size-small:  14px; /* corpo padrão */
  --font-size-medium: 16px;
  --font-size-large:  20px;
  --font-size-bigger: 24px;

  /* ---------- Primitivas (referência das escalas) ---------- */

  /* Main / Azul da marca */
  --brand-main-1:  #CCF3FF;
  --brand-main-2:  #A3E6FF;
  --brand-main-3:  #74CCF2;
  --brand-main-4:  #49B0E6;
  --brand-main-5:  #2395D9;
  --brand-main-6:  #0079CC; /* primária */
  --brand-main-7:  #005DA6;
  --brand-main-8:  #004380;
  --brand-main-9:  #002C59;
  --brand-main-10: #001733;
  --brand-main-200: #9AC9E9;
  --brand-main-500: #0079CC;
  --brand-main-700: #012A68;
  --brand-main-900: #001737;

  /* Teal / Success */
  --brand-teal-1:  #D9FFEF;
  --brand-teal-2:  #B0FFE1;
  --brand-teal-3:  #87FFD6;
  --brand-teal-4:  #5BF4C5;
  --brand-teal-5:  #31E8B6;
  --brand-teal-6:  #0BDBA9;
  --brand-teal-7:  #00B58F;
  --brand-teal-8:  #008F76;
  --brand-teal-9:  #00685A;
  --brand-teal-10: #00423B;

  /* Coral / Error */
  --brand-coral-3:  #FFE3DE;
  --brand-coral-4:  #FFBEB5;
  --brand-coral-5:  #FF968D;
  --brand-coral-6:  #FD6A63;
  --brand-coral-7:  #D74B49;
  --brand-coral-8:  #B13336;
  --brand-coral-9:  #8A2127;
  --brand-coral-10: #64171E;

  /* Orange / Warning */
  --brand-orange-2:  #FFEEDD;
  --brand-orange-3:  #FFD7B4;
  --brand-orange-4:  #FFBD8C;
  --brand-orange-5:  #FFA063;
  --brand-orange-6:  #FF813A;
  --brand-orange-7:  #D96126;
  --brand-orange-8:  #B34417;
  --brand-orange-9:  #8C2D0B;
  --brand-orange-10: #661C07;

  /* Amber */
  --brand-amber-3:  #FFFBF3;
  --brand-amber-4:  #FFECCB;
  --brand-amber-5:  #FFDAA2;
  --brand-amber-6:  #FFC679;
  --brand-amber-7:  #D9A05C;
  --brand-amber-8:  #B37C43;
  --brand-amber-9:  #8C5A2E;
  --brand-amber-10: #663F20;

  /* Purple */
  --brand-purple-2:  #EFDDFF;
  --brand-purple-3:  #DAB4FF;
  --brand-purple-4:  #C28CFF;
  --brand-purple-5:  #A763FF;
  --brand-purple-6:  #8A3AFF;
  --brand-purple-7:  #6926D9;
  --brand-purple-8:  #4C17B3;
  --brand-purple-9:  #320B8C;
  --brand-purple-10: #210766;

  /* Neutral */
  --brand-neutral-100: #E4EBF4;
  --brand-neutral-300: #C4CFDE;
  --brand-neutral-500: #93A8C5;
  --brand-neutral-700: #5E768D;

  /* Base */
  --base-white: #FFFFFF;
  --base-black: #000000;
}

/**
 * Dark mode — PENDENTE.
 * Quando as primitivas do Dark forem finalizadas no Figma, preencha os overrides:
 *
 * :root[data-theme="dark"],
 * @media (prefers-color-scheme: dark) {
 *   :root {
 *     --color-bg-container: ...;
 *     --color-bg-layout: ...;
 *     --color-text-base: ...;
 *     ...
 *   }
 * }
 */