/*
 * ============================================================
 * TIRZEAPP — DESIGN TOKENS
 * ============================================================
 * Arquivo de variáveis CSS globais.
 * Fonte única da verdade para toda a linguagem visual.
 * Não referenciar valores hardcoded fora deste arquivo.
 * ============================================================
 */

:root {

  /* ────────────────────────────────────────────
   * PALETA DE CORES — MONOCROMÁTICO PREMIUM
   * ──────────────────────────────────────────── */

  /* Fundo raiz */
  --color-bg-root:         #000000;
  --color-bg-void:         #000000;

  /* Superfícies (escuros estratificados) */
  --color-surface-00:      #000000;
  --color-surface-01:      #0A0A0A;
  --color-surface-02:      #111111;
  --color-surface-03:      #161616;
  --color-surface-04:      #1A1A1A;
  --color-surface-05:      #222222;
  --color-surface-06:      #2A2A2A;

  /* Bordas */
  --color-border-subtle:   rgba(255, 255, 255, 0.07);
  --color-border-default:  rgba(255, 255, 255, 0.12);
  --color-border-strong:   rgba(255, 255, 255, 0.22);
  --color-border-solid:    #2E2E2E;

  /* Textos */
  --color-text-primary:    #FFFFFF;
  --color-text-heading:    #FFFFFF;
  --color-text-sub:        #E8E8E8;
  --color-text-secondary:  #9E9E9E;
  --color-text-tertiary:   rgba(255, 255, 255, 0.45);
  --color-text-support:    rgba(255, 255, 255, 0.65);
  --color-text-disabled:   rgba(255, 255, 255, 0.28);
  --color-text-inverse:    #000000;

  /* Interativos */
  --color-interactive:     #FFFFFF;
  --color-interactive-dim: rgba(255, 255, 255, 0.08);
  --color-interactive-hover: rgba(255, 255, 255, 0.12);
  --color-interactive-press: rgba(255, 255, 255, 0.06);

  /* ────────────────────────────────────────────
   * PALETA SEMÂNTICA AUXILIAR
   * Uso controlado: acentos funcionais em microelementos.
   * NUNCA usar em fundos dominantes, botões principais ou headlines.
   * Sempre combinar com seta, ícone, label ou texto (acessibilidade).
   * ──────────────────────────────────────────── */

  /* Positivo / crescimento / normal */
  --color-semantic-positive:        #4CAF7D;   /* verde médio, legível em fundo escuro */
  --color-semantic-positive-dim:    rgba(76, 175, 125, 0.12);
  --color-semantic-positive-border: rgba(76, 175, 125, 0.25);
  --color-semantic-positive-text:   #6FCF97;   /* variante mais clara para texto puro */

  /* Negativo / queda / risco / alerta crítico */
  --color-semantic-negative:        #D95F5F;   /* vermelho dessaturado, não vibrante */
  --color-semantic-negative-dim:    rgba(217, 95, 95, 0.12);
  --color-semantic-negative-border: rgba(217, 95, 95, 0.25);
  --color-semantic-negative-text:   #E07070;   /* variante mais clara para texto puro */

  /* Atenção / observação / em revisão */
  --color-semantic-warning:        #C9A84C;   /* amarelo-âmbar, não saturado */
  --color-semantic-warning-dim:    rgba(201, 168, 76, 0.12);
  --color-semantic-warning-border: rgba(201, 168, 76, 0.25);
  --color-semantic-warning-text:   #E2C97E;   /* variante mais clara para texto puro */

  /* Informação / progresso / neutro ativo */
  --color-semantic-info:           #4A90B8;   /* azul frio dessaturado */
  --color-semantic-info-dim:       rgba(74, 144, 184, 0.12);
  --color-semantic-info-border:    rgba(74, 144, 184, 0.25);
  --color-semantic-info-text:      #7EB4C9;   /* variante mais clara para texto puro */

  /* Aliases de estado legados (mapeados para a nova paleta) */
  --color-state-success:   var(--color-semantic-positive-text);
  --color-state-warning:   var(--color-semantic-warning-text);
  --color-state-error:     var(--color-semantic-negative-text);
  --color-state-info:      var(--color-semantic-info-text);

  /* ────────────────────────────────────────────
   * TIPOGRAFIA
   * ──────────────────────────────────────────── */

  --font-family-base:      'Archivo', system-ui, sans-serif;

  /* Tamanhos — escala modular (razão ~1.25) */
  --font-size-2xs:   10px;
  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  15px;
  --font-size-md:    17px;
  --font-size-lg:    20px;
  --font-size-xl:    24px;
  --font-size-2xl:   30px;
  --font-size-3xl:   38px;
  --font-size-4xl:   48px;
  --font-size-5xl:   62px;
  --font-size-6xl:   80px;
  --font-size-hero:  96px;

  /* Pesos */
  --font-weight-thin:      100;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Line-heights */
  --line-height-tight:      1.08;
  --line-height-snug:       1.22;
  --line-height-base:       1.5;
  --line-height-relaxed:    1.68;
  --line-height-loose:      1.85;
  /* Hero-específico: mais ar entre linhas do H1 */
  --line-height-hero-title: 1.06;

  /* Letter-spacing */
  --tracking-tightest:  -0.04em;
  --tracking-tight:     -0.02em;
  --tracking-snug:      -0.01em;
  --tracking-normal:     0em;
  --tracking-wide:       0.04em;
  --tracking-wider:      0.08em;
  --tracking-widest:     0.14em;
  --tracking-label:      0.10em;

  /* ────────────────────────────────────────────
   * ESPAÇAMENTO — ESCALA 4px
   * ──────────────────────────────────────────── */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-11:   44px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-18:   72px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-36:   144px;
  --space-40:   160px;
  --space-48:   192px;

  /* Margens de página */
  --page-margin-desktop:  80px;
  --page-margin-tablet:   40px;
  --page-margin-mobile:   20px;

  /* ────────────────────────────────────────────
   * BORDER RADIUS
   * ──────────────────────────────────────────── */

  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-pill:   999px;

  /* ────────────────────────────────────────────
   * SOMBRAS / ELEVAÇÃO
   * ──────────────────────────────────────────── */

  --shadow-none:   none;
  --shadow-xs:     0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.7);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.9);
  --shadow-glow:   0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 24px rgba(0,0,0,0.8);

  /* ────────────────────────────────────────────
   * TRANSIÇÕES
   * ──────────────────────────────────────────── */

  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant:  80ms;
  --duration-fast:     140ms;
  --duration-base:     220ms;
  --duration-slow:     360ms;
  --duration-enter:    480ms;

  /* ────────────────────────────────────────────
   * Z-INDEX
   * ──────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-header:  100;
  --z-modal:   200;
  --z-toast:   300;
  --z-max:     999;

  /* ────────────────────────────────────────────
   * GRID
   * ──────────────────────────────────────────── */

  --grid-cols:     12;
  --grid-gutter:   24px;
  --grid-max:      1440px;
  --content-max:   960px;
  --narrow-max:    640px;
}

/* ────────────────────────────────────────────
 * BREAKPOINTS (referência, usar via media queries)
 * xs  < 480px
 * sm  < 640px
 * md  < 768px
 * lg  < 1024px
 * xl  < 1280px
 * 2xl < 1440px
 * ──────────────────────────────────────────── */