/*
  Kayru by Eikon — Design Tokens
  ------------------------------------------------------------------
  Fonte única da verdade para cor, espaçamento, tipografia, raio,
  sombra, z-index e larguras de layout. Apenas custom properties.
  Nenhuma regra de estilo real deve viver aqui — isso fica em
  base.css, components.css e layout.css.

  Cores de marca (não alterar sem atualizar o manual da marca):
  Cinza-gelo #E9EDF0, Azul-marinho #17263B, Azul-safira #315FA7.
  Todas as demais tonalidades de azul abaixo são DERIVADAS por
  mistura matemática dessas três cores — não são cores de marca
  novas, servem só para hover/borda/fundo sutil. Ver docs/05-DESIGN-SYSTEM.md
  para a fórmula de cada derivação e os cálculos de contraste WCAG AA.
*/

:root {
  /* ---------------------------------------------------------------
     1. Paleta de marca (Manual da Marca Kayru by Eikon, v1.0)
     --------------------------------------------------------------- */
  --brand-gelo: #E9EDF0;
  --brand-marinho: #17263B;
  --brand-safira: #315FA7;
  --brand-white: #FFFFFF;

  /* ---------------------------------------------------------------
     2. Escalas derivadas (mistura linear em sRGB, não são marca)
     --------------------------------------------------------------- */

  /* Derivadas de safira — para estados interativos de ações/links */
  --derived-safira-hover: #2E589A;     /* safira 88% + marinho 12% */
  --derived-safira-active: #2C5491;    /* safira 80% + marinho 20% */
  --derived-safira-border: #9FB4D3;    /* safira 40% + gelo 60% */
  --derived-safira-subtle-bg: #D7DFE9; /* safira 10% + gelo 90% */
  --derived-safira-focus-ring: rgba(49, 95, 167, 0.35);

  /* Derivadas de marinho — para texto secundário, bordas e fundos sutis */
  --derived-marinho-hover: #1A2C46;      /* marinho 90% + safira 10%, uso sobre fundo escuro */
  --derived-marinho-secondary-text: #566271; /* marinho 70% + gelo 30% */
  --derived-marinho-disabled-text: #A0A7B1;  /* marinho 35% + gelo 65% */
  --derived-marinho-border: #CACFD5;     /* marinho 15% + gelo 85%, decorativo */
  --derived-marinho-border-strong: #6B7683; /* marinho 60% + gelo 40%, contraste >=3:1 */
  --derived-marinho-subtle-bg: #DCE1E5;  /* marinho 6% + gelo 94% */

  /* ---------------------------------------------------------------
     3. Tokens semânticos (o que a interface efetivamente consome)
     --------------------------------------------------------------- */
  --color-canvas: var(--brand-gelo);
  --color-surface: var(--brand-white);
  --color-surface-sunken: var(--derived-marinho-subtle-bg);

  --color-text-primary: var(--brand-marinho);
  --color-text-secondary: var(--derived-marinho-secondary-text);
  --color-text-disabled: var(--derived-marinho-disabled-text);
  --color-text-on-safira: var(--brand-white);
  --color-text-on-marinho: var(--brand-white);
  --color-text-link: var(--brand-safira);
  --color-text-link-hover: var(--derived-safira-hover);

  --color-border: var(--derived-marinho-border);
  --color-border-strong: var(--derived-marinho-border-strong);
  --color-border-safira: var(--derived-safira-border);

  --color-action-primary: var(--brand-safira);
  --color-action-primary-hover: var(--derived-safira-hover);
  --color-action-primary-active: var(--derived-safira-active);
  --color-action-primary-subtle: var(--derived-safira-subtle-bg);

  --color-focus-ring: var(--brand-safira);
  --color-focus-ring-shadow: var(--derived-safira-focus-ring);

  /* ---------------------------------------------------------------
     4. Cores de estado (sucesso/alerta/erro)
     Propositalmente FORA da paleta de marca — ver justificativa em
     docs/05-DESIGN-SYSTEM.md. Tons escuros (faixa 700-800 de
     referência) escolhidos para valer tanto como texto sobre
     --color-canvas/--color-surface quanto como fundo sólido com
     texto branco, sempre >= 4.5:1 nas duas direções.
     --------------------------------------------------------------- */
  --color-success: #166534;
  --color-success-bg: #E3F2E8;
  --color-success-border: #A9CFB6;

  --color-warning: #92400E;
  --color-warning-bg: #FCEEE0;
  --color-warning-border: #E4B98A;

  --color-danger: #B91C1C;
  --color-danger-bg: #FBE7E7;
  --color-danger-border: #E7A9A9;

  --color-info: var(--brand-safira);
  --color-info-bg: var(--derived-safira-subtle-bg);
  --color-info-border: var(--derived-safira-border);

  /* ---------------------------------------------------------------
     5. Espaçamento (escala 4/8/12/16/24/32/48)
     --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---------------------------------------------------------------
     6. Raio
     --------------------------------------------------------------- */
  --radius-control: 8px;   /* botões, campos, badges retangulares */
  --radius-card: 12px;     /* cards, modais, popovers */
  --radius-pill: 999px;    /* badges/pills, avatares */

  /* ---------------------------------------------------------------
     7. Tipografia
     --------------------------------------------------------------- */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-body: 16px;
  --font-size-lg: 18px;
  --font-size-title-sm: 24px;
  --font-size-title-lg: 32px;

  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  /* ---------------------------------------------------------------
     8. Sombra
     --------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(23, 38, 59, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 38, 59, 0.10);
  --shadow-lg: 0 12px 32px rgba(23, 38, 59, 0.16);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring-shadow);

  /* ---------------------------------------------------------------
     9. Z-index
     --------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky-header: 10;
  --z-drawer: 20;
  --z-modal-backdrop: 30;
  --z-modal: 31;
  --z-toast: 40;
  --z-tooltip: 50;

  /* ---------------------------------------------------------------
     10. Larguras de layout
     --------------------------------------------------------------- */
  --layout-sidebar-width: 240px;
  --layout-content-max-width: 1200px;
  --layout-touch-target-min: 44px;

  /* ---------------------------------------------------------------
     11. Breakpoints (documentativo — media queries não leem custom
     properties, os valores reais ficam hardcoded em layout.css)
     --------------------------------------------------------------- */
  --breakpoint-mobile: 390px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}