/* Gerado por _scripts/export.mjs a partir de DESIGN.md (schema v2) */
/* Não editar manualmente; rodar export.mjs novamente após alterar DESIGN.md */

:root {
  color-scheme: light dark;

  /* ============ COLORS (canonical slots) ============ */
  --color-primary: #4FC7BB;
  --color-on-primary: #0E1A16;
  --color-secondary: #226D6D;
  --color-on-secondary: #F9FBFB;
  --color-tertiary: #E7F3EF;
  --color-on-tertiary: #1B2826;
  --color-neutral: #576B69;
  --color-surface: #F9FBFB;
  --color-on-surface: #435654;
  --color-surface-variant: #F1F6F5;
  --color-on-surface-variant: #435654;
  --color-outline: #6F8B88;
  --color-error: #B02145;
  --color-on-error: #F9FBFB;
  --color-success: #1C7853;
  --color-warning: #BE3927;
  --color-info: #226D6D;

  /* ============ NAMED COLORS (do manual) ============ */
  --color-canvas: #F9FBFB;
  --color-cartao: #F1F6F5;
  --color-cartao-alto: #E8EFEF;
  --color-tingido: #E7F3EF;
  --color-tingido-borda: #CFE6E0;
  --color-fio: #D9E2E2;
  --color-fio-alto: #C5D3D1;  /* 1.49 sobre canvas (decorativa, nunca limite de controle) */
  --color-contorno: #6F8B88;  /* 3.53 / 3.36 sobre canvas e cartão (borda de controle, piso 3:1) */
  --color-tinta: #1B2826;  /* 14.67 / 13.96 / 13.08 / 13.40 sobre canvas, cartão, cartão-alto e tingido; só título e frase de digitar */
  --color-corpo: #435654;  /* 7.49 / 7.13 / 6.68 / 6.84 sobre canvas, cartão, cartão-alto e tingido */
  --color-meta: #576B69;  /* 5.45 / 5.18 / 4.86 / 4.97 sobre canvas, cartão, cartão-alto e tingido */
  --color-teal: #4FC7BB;  /* tinta on-teal em cima 8.68:1 */
  --color-teal-hover: #45B3A8;  /* tinta on-teal em cima 7.02:1 */
  --color-teal-ativo: #3FA79C;  /* tinta on-teal em cima 6.13:1 */
  --color-teal-tinta: #226D6D;  /* 5.82 / 5.53 / 5.18 / 5.31 sobre canvas, cartão, cartão-alto e tingido */
  --color-teal-borda: #3A8C85;  /* 3.84 / 3.65 sobre canvas e cartão */
  --color-on-teal: #0E1A16;
  --color-selecao: #CDEBE6;
  --color-aviso-fundo: #1B2826;
  --color-aviso-tinta: #E4ECEA;  /* 12.69:1 sobre aviso-fundo */
  --color-slide-exemplo: #FCFDFD;

  /* ============ TYPOGRAPHY (roles) ============ */
  --font-display-hero: "Hanken Grotesk", system-ui, sans-serif;
  --text-display-hero: 48px;
  --font-weight-display-hero: 700;
  --leading-display-hero: 1.06;
  --tracking-display-hero: -0.03em;
  --font-display-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-display-large: 42px;
  --font-weight-display-large: 700;
  --leading-display-large: 1.1;
  --tracking-display-large: -0.026em;
  --font-section-heading: "Hanken Grotesk", system-ui, sans-serif;
  --text-section-heading: 34px;
  --font-weight-section-heading: 700;
  --leading-section-heading: 1.12;
  --tracking-section-heading: -0.024em;
  --font-subheading-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-subheading-large: 20px;
  --font-weight-subheading-large: 600;
  --leading-subheading-large: 1.3;
  --tracking-subheading-large: -0.015em;
  --font-subheading: "Hanken Grotesk", system-ui, sans-serif;
  --text-subheading: 17px;
  --font-weight-subheading: 600;
  --leading-subheading: 1.35;
  --tracking-subheading: -0.01em;
  --font-body-large: "Hanken Grotesk", system-ui, sans-serif;
  --text-body-large: 19px;
  --font-weight-body-large: 400;
  --leading-body-large: 1.55;
  --tracking-body-large: 0em;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --text-body: 17px;
  --font-weight-body: 400;
  --leading-body: 1.6;
  --tracking-body: 0em;
  --font-body-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-body-small: 16px;
  --font-weight-body-small: 400;
  --leading-body-small: 1.5;
  --tracking-body-small: 0em;
  --font-button: "Hanken Grotesk", system-ui, sans-serif;
  --text-button: 15px;
  --font-weight-button: 600;
  --leading-button: 1.2;
  --tracking-button: -0.005em;
  --font-button-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-button-small: 14px;
  --font-weight-button-small: 600;
  --leading-button-small: 1.2;
  --tracking-button-small: 0em;
  --font-link: "Hanken Grotesk", system-ui, sans-serif;
  --text-link: 15px;
  --font-weight-link: 500;
  --leading-link: 1.5;
  --tracking-link: 0em;
  --font-caption: "Hanken Grotesk", system-ui, sans-serif;
  --text-caption: 15px;
  --font-weight-caption: 400;
  --leading-caption: 1.45;
  --tracking-caption: 0em;
  --font-caption-small: "Hanken Grotesk", system-ui, sans-serif;
  --text-caption-small: 14px;
  --font-weight-caption-small: 400;
  --leading-caption-small: 1.45;
  --tracking-caption-small: 0.004em;
  --font-micro: "Hanken Grotesk", system-ui, sans-serif;
  --text-micro: 14px;
  --font-weight-micro: 600;
  --leading-micro: 1.6;
  --tracking-micro: 0em;
  --font-code-body: "JetBrains Mono", ui-monospace, monospace;
  --text-code-body: 15.5px;
  --font-weight-code-body: 500;
  --leading-code-body: 1.45;
  --tracking-code-body: -0.01em;
  --font-code-bold: "JetBrains Mono", ui-monospace, monospace;
  --text-code-bold: 18px;
  --font-weight-code-bold: 500;
  --leading-code-bold: 1.45;
  --tracking-code-bold: -0.01em;

  /* ============ SPACING ============ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 112px;
  --space-gutter: 16px;
  --space-container-padding: 40px;

  /* ============ ROUNDED ============ */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ============ BREAKPOINTS ============ */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 640px;
  --breakpoint-desktop: 960px;
  --breakpoint-wide: 1100px;

  /* ============ SHADOWS ============ */
  --shadow-flat: none;
  --shadow-suave: 0 1px 2px rgb(27 40 38 / 6%), 0 2px 6px rgb(27 40 38 / 6%);
  --shadow-retomada: 0 2px 4px rgb(27 40 38 / 5%), 0 10px 28px -8px rgb(27 40 38 / 12%);
  --shadow-flutuante: 0 4px 8px rgb(27 40 38 / 6%), 0 28px 56px -20px rgb(27 40 38 / 22%);
  --shadow-botao: 0 1px 2px rgb(27 40 38 / 6%);

  /* ============ MOTION ============ */
  --duration-rapida: 150ms;
  --duration-base: 250ms;
  --duration-lenta: 400ms;
  --duration-enfase: 500ms;
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-troca: ease-in-out;

  /* ============ CUSTOM (medida de layout e camada de fundo) ============ */
  --coluna: 1160px;
  --medida: 64ch;
  --alvo: 44px;
  --ui-raio-painel: 16px;
  --ui-raio-controle: 12px;
  --ui-raio-chip: 8px;
  --revela-distancia: 12px;
  --revela-blur: 3px;
  --revela-escalonamento: 40ms;
  --roteiro-escalonamento: 260ms;
  --passo-distancia: 8px;
  --aviso-distancia: 16px;

  /* ============ Z-INDEX ============ */
  --z-base: 0;
  --z-raised: 20;
  --z-sticky: 60;
  --z-aviso: 160;

  /* ============ OPACITY ============ */
  --opacity-invisible: 0;
  --opacity-desativado: 0.45;
  --opacity-full: 1;
}