/* ==========================================================================
   Leads Domus Reinvestment — Design tokens
   Fonte única de cor, tipo, espaço, raio, elevação e movimento.
   Referência completa: docs/design-system.md
   ========================================================================== */

/* Archivo variável (largura 62–125%, peso 100–900), OFL, auto-hospedada.
   A largura é parte da identidade: expandida na marca e nos títulos,
   normal no texto e nos dados. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+A720-A7FF;
}

:root {
  /* ---- Tipografia ------------------------------------------------------ */
  --font-sans: "Archivo", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Escala (px/line-height) — razão ~1.2 no corpo, ~1.33 nos títulos. */
  --type-display: semi-expanded 620 2.5rem/1.1 var(--font-sans);    /* 40 — número herói, nome na página pública */
  --type-title: 700 1.5rem/1.25 var(--font-sans);      /* 24 — título de página */
  --type-heading: 700 1rem/1.4 var(--font-sans);       /* 16 — título de seção/painel */
  --type-subheading: 650 0.875rem/1.45 var(--font-sans); /* 14 — título de card, nome em lista */
  --type-body: 500 0.875rem/1.6 var(--font-sans);      /* 14 — texto corrido */
  --type-small: 500 0.8125rem/1.5 var(--font-sans);    /* 13 — descrições, células de tabela */
  --type-caption: 550 0.75rem/1.45 var(--font-sans);   /* 12 — metadados, rótulos */
  --type-metric: semi-expanded 620 2rem/1.1 var(--font-sans);      /* 32 — métricas */

  --tracking-tight: -0.025em;
  --tracking-snug: -0.012em;
  --tracking-wordmark: 0.02em;
  --stretch-display: 118%;  /* marca e números heróis */
  --stretch-title: 108%;    /* títulos de página e painel */

  /* ---- Cor: base ------------------------------------------------------- */
  /* Domus: verde-noite profundo (fachada ao anoitecer). Nunca preto neutro. */
  --domus-975: #08130f;
  --domus-950: #0c1b17;
  --domus-900: #11241f;
  --domus-800: #19322b;
  --domus-700: #234238;
  --domus-200: #b7c8c0;
  --domus-100: #dae4df;
  --domus-50: #eef3f0;

  /* Pedra: neutros frios levemente esverdeados (nada de creme). */
  --mineral-0: #ffffff;
  --mineral-25: #f8f9f7;
  --mineral-50: #eff1ed;
  --mineral-100: #e6e9e4;
  --mineral-200: #d9ded7;
  --mineral-300: #c2c9c0;
  --graphite-400: #858e89;
  --graphite-500: #66706b;
  --graphite-600: #4c5551;
  --graphite-800: #242b28;
  --graphite-900: #141a17;

  /* Lume: a luz da janela acesa. Reservada para L·A·R, estado ativo e foco. */
  --lume-600: #8f5d14;  /* texto sobre claro (AA) */
  --lume-500: #c98a2e;  /* acento sobre claro */
  --lume-400: #e7b35e;  /* luz sobre o escuro */
  --lume-300: #f2cf8f;
  --lume-50: #fbf3e3;

  /* Semânticas — só para estado, nunca decoração. */
  --danger-600: #b42630;
  --danger-50: #fbeeed;
  --warning-600: #9a6411;
  --warning-50: #fbf3e4;
  --success-600: #2c7a59;
  --success-50: #e9f4ee;

  /* ---- Cor: papéis ----------------------------------------------------- */
  --color-canvas: var(--mineral-50);
  --color-surface: var(--mineral-0);
  --color-surface-sunken: var(--mineral-25);
  --color-surface-hover: var(--mineral-50);
  --color-border: var(--mineral-200);
  --color-border-subtle: var(--mineral-100);
  --color-border-strong: var(--mineral-300);
  --color-text: var(--graphite-900);
  --color-text-secondary: var(--graphite-600);
  --color-text-tertiary: var(--graphite-500);
  --color-text-disabled: var(--graphite-400);
  --color-primary: var(--domus-900);
  --color-primary-hover: var(--domus-700);
  --color-on-primary: var(--mineral-0);
  --color-accent: var(--lume-500);
  --color-accent-strong: var(--lume-600);
  --color-focus: rgba(201, 138, 46, 0.62);

  /* Superfícies escuras (sidebar, hero público) */
  --color-deep: var(--domus-900);
  --color-deep-raised: var(--domus-800);
  --color-on-deep: #e6eee9;
  --color-on-deep-secondary: rgba(230, 238, 233, 0.62);
  --color-on-deep-tertiary: rgba(230, 238, 233, 0.56); /* ≥ 4.5:1 sobre petróleo 900 */
  --color-deep-border: rgba(255, 255, 255, 0.08);

  /* ---- Espaço (base 4) ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- Raio por hierarquia -------------------------------------------- */
  --radius-xs: 4px;   /* kbd, marcadores */
  --radius-sm: 6px;   /* chips, badges, itens de menu */
  --radius-md: 7px;   /* controles, linhas clicáveis */
  --radius-lg: 10px;  /* painéis, cards */
  --radius-xl: 14px;  /* drawer, palette, dispositivo de prévia */
  --radius-full: 999px;

  /* ---- Elevação -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(12, 27, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(12, 27, 23, 0.06), 0 1px 2px rgba(12, 27, 23, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(12, 27, 23, 0.16), 0 2px 4px rgba(12, 27, 23, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(8, 19, 15, 0.28);
  --overlay: rgba(8, 19, 15, 0.36);

  /* ---- Movimento ------------------------------------------------------- */
  --dur-fast: 120ms;   /* hover, foco, cor */
  --dur-base: 180ms;   /* popover, tooltip, troca de tela, toast */
  --dur-slow: 240ms;   /* drawer, palette */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-brand: cubic-bezier(0.65, 0, 0.15, 1); /* revelação da marca: lenta no fim */

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-width: 252px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;
  --content-max: 1280px;
  --z-sidebar: 30;
  --z-overlay: 40;
  --z-drawer: 50;
  --z-palette: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* ---- Ícones ---------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
}