/**
 * Fôlego Sobrando — tokens.css
 *
 * Fonte única de verdade do Design System: fontes, cores, tipografia,
 * espaço, containers, bordas, movimento e foco.
 *
 * Duas camadas:
 *   --fs-*  valores do design system da marca (design-system/tokens.css),
 *           com a regra de uso de cada um. Os títulos usam Outfit, a fonte
 *           do logo, no lugar da Nunito (decisão de 31/10/2026).
 *   --ci-*  papéis que os componentes consomem. A estrutura é a mesma do
 *           tema do Comece Imperfeito, para que melhorias sirvam nos dois
 *           sites; aqui eles apontam para os --fs-*.
 *
 * Pontos de quebra (referência; variáveis CSS não funcionam em @media):
 *   mobile  ≤ 767px
 *   tablet  768px – 1024px
 *   desktop ≥ 1025px
 *   wide    ≥ 1280px
 */

/* -------------------------------------------------------------------------
 * Fontes hospedadas localmente (variáveis: todos os pesos em um arquivo).
 * Outfit nos títulos (700 e 800); Source Sans 3 no texto (400 e 600,
 * além de 400 itálico).
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
	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: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	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: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	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: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
 * Design system da marca — tema claro (padrão)
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* Cores */
	--fs-surface: #faf7f2;       /* Fundo do site e das páginas. */
	--fs-surface-raised: #ffffff; /* Cards de artigo, tabelas e campos de formulário sobre surface. */
	--fs-surface-tint: #e3f0e7;  /* Caixas "Na prática", faixas de seção e fundo da barra de fôlego. */
	--fs-line: #d9e2db;          /* Divisores e bordas decorativas. Campos usam ink-muted. */
	--fs-ink: #262b28;           /* Texto principal. */
	--fs-ink-muted: #5e6862;     /* Datas, legendas, metadados e bordas de campo. */
	--fs-folha: #1f4d3a;         /* Marca: títulos de destaque, links, anel de foco e linha de fôlego. */
	--fs-on-folha: #faf7f2;      /* Texto e ícones sobre preenchimento folha. */
	--fs-sol: #f28c28;           /* Botão principal e marcos de conquista. Só como preenchimento. */
	--fs-on-sol: #262b28;        /* Texto do botão principal. Nunca branco. */
	--fs-sol-ink: #9a4a06;       /* Texto laranja ("5 km sem parar"). */
	--fs-sol-soft: #fde8d1;      /* Fundo de selos de conquista e da caixa de oferta. */
	--fs-cuidado: #7a4f00;       /* Texto dos avisos de saúde, sobre cuidado-soft. */
	--fs-cuidado-soft: #fff1d0;  /* Fundo da caixa de aviso de saúde. */
	--fs-link: var(--fs-folha);  /* Links no texto, sublinhados. */
	--fs-focus: var(--fs-folha); /* Anel de foco, 2px sólido com 2px de afastamento. */

	/* Fontes */
	--fs-font-display: "Outfit", ui-rounded, system-ui, sans-serif;
	--fs-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-display-size: 40px; --fs-display-line: 44px; --fs-display-weight: 800; --fs-display-tracking: -0.01em; /* Título da home e da página de vendas. */
	--fs-h1-size: 32px; --fs-h1-line: 38px; --fs-h1-weight: 800; --fs-h1-tracking: -0.01em; /* Título de artigo. */
	--fs-h2-size: 24px; --fs-h2-line: 30px; --fs-h2-weight: 700; /* Seções do artigo. */
	--fs-h3-size: 19px; --fs-h3-line: 26px; --fs-h3-weight: 700; /* Subseções, títulos de caixas e de cards. */
	--fs-body-size: 18px; --fs-body-line: 30px; --fs-body-weight: 400; /* Corpo dos artigos e da página de vendas. */
	--fs-body-small-size: 16px; --fs-body-small-line: 24px; --fs-body-small-weight: 400; /* Tabelas, FAQ, caixas e cards. */
	--fs-label-size: 13px; --fs-label-line: 18px; --fs-label-weight: 600; --fs-label-tracking: 0.06em; /* Rótulos em caixa-alta. */

	/* Espaçamento */
	--fs-space-1: 4px;   /* Entre ícone e texto. */
	--fs-space-2: 8px;   /* Entre rótulo e título; espessura da linha de fôlego. */
	--fs-space-3: 12px;  /* Padding vertical de botões e selos. */
	--fs-space-4: 16px;  /* Margem lateral mínima no celular; padding de caixas pequenas. */
	--fs-space-6: 24px;  /* Padding de cards e caixas "Na prática"; raio dos arcos da linha de fôlego. */
	--fs-space-8: 32px;  /* Entre blocos de conteúdo no artigo. */
	--fs-space-12: 48px; /* Entre seções da página de vendas. */

	/* Raios */
	--fs-radius-sm: 6px;     /* Selos e etiquetas de categoria. */
	--fs-radius-md: 14px;    /* Cards, caixas, imagens de capa e campos. */
	--fs-radius-pill: 999px; /* Botões e a barra de progresso da linha de fôlego. */
}

/* Tema escuro: pela preferência do sistema (antes do script) ou pelo botão. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fs-surface: #16211c;
		--fs-surface-raised: #1e2b25;
		--fs-surface-tint: #213a2f;
		--fs-line: #2f443a;
		--fs-ink: #eef2ec;
		--fs-ink-muted: #a9b8af;
		--fs-folha: #7fc9a0;
		--fs-on-folha: #16211c;
		--fs-sol: #f59a3d;
		--fs-on-sol: #1a1f1c;
		--fs-sol-ink: #f59a3d;
		--fs-sol-soft: #3a2a17;
		--fs-cuidado: #f2c46b;
		--fs-cuidado-soft: #3a2e12;
	}
}

:root[data-theme="dark"] {
	--fs-surface: #16211c;
	--fs-surface-raised: #1e2b25;
	--fs-surface-tint: #213a2f;
	--fs-line: #2f443a;
	--fs-ink: #eef2ec;
	--fs-ink-muted: #a9b8af;
	--fs-folha: #7fc9a0;
	--fs-on-folha: #16211c;
	--fs-sol: #f59a3d;
	--fs-on-sol: #1a1f1c;
	--fs-sol-ink: #f59a3d;
	--fs-sol-soft: #3a2a17;
	--fs-cuidado: #f2c46b;
	--fs-cuidado-soft: #3a2e12;
}

/* -------------------------------------------------------------------------
 * Papéis consumidos pelos componentes
 * ---------------------------------------------------------------------- */

:root {
	/* Cores funcionais */
	--ci-color-bg: var(--fs-surface);
	--ci-color-surface: var(--fs-surface-raised);
	--ci-color-surface-sunken: var(--fs-surface-tint);
	--ci-color-text: var(--fs-ink);
	--ci-color-text-secondary: var(--fs-ink-muted);
	--ci-color-text-tertiary: var(--fs-ink-muted);
	--ci-color-border: var(--fs-line);              /* divisores, decorativo */
	--ci-color-border-strong: var(--fs-ink-muted);  /* bordas de campo e controles */
	--ci-color-link: var(--fs-link);
	--ci-color-link-underline: var(--fs-link);

	/* Ação da marca (folha): links-botão, botões secundários, seleção de opções. */
	--ci-color-action: var(--fs-folha);
	--ci-color-action-hover: color-mix(in srgb, var(--fs-folha) 85%, var(--fs-ink));
	--ci-color-action-active: color-mix(in srgb, var(--fs-folha) 75%, var(--fs-ink));
	--ci-color-on-action: var(--fs-on-folha);

	/* Ação principal (sol): um botão por tela, sempre com texto on-sol. */
	--ci-color-cta: var(--fs-sol);
	--ci-color-cta-hover: color-mix(in srgb, var(--fs-sol) 88%, var(--fs-on-sol));
	--ci-color-cta-active: color-mix(in srgb, var(--fs-sol) 80%, var(--fs-on-sol));
	--ci-color-on-cta: var(--fs-on-sol);

	--ci-color-highlight: var(--fs-sol-ink);
	--ci-color-highlight-soft: var(--fs-sol-soft);
	--ci-color-caution: var(--fs-cuidado);
	--ci-color-caution-soft: var(--fs-cuidado-soft);

	--ci-color-focus: var(--fs-focus);
	--ci-color-selection: var(--fs-surface-tint);
	--ci-color-disabled-bg: var(--fs-line);
	--ci-color-disabled-text: var(--fs-ink-muted);
	--ci-color-media-bg: transparent;
	--ci-color-media-outline: color-mix(in srgb, var(--fs-ink) 6%, transparent);

	/* Tipografia */
	--ci-font-display: var(--fs-font-display);
	--ci-font-sans: var(--fs-font-body);
	--ci-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ci-weight-regular: 400;
	--ci-weight-medium: 600;   /* Source Sans 3: o 500 fica perto demais do 400. */
	--ci-weight-semibold: 600;
	--ci-weight-bold: 700;
	--ci-weight-black: 800;

	/* Escala fluida: celular (320px) → desktop. Os valores de desktop são os do design system. */
	--ci-text-xs: 0.8125rem;                                    /* 13px: label */
	--ci-text-sm: 0.9375rem;                                    /* 15px */
	--ci-text-base: 1rem;                                       /* 16px: body-small */
	--ci-text-prose: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17 → 18px: body */
	--ci-text-lg: 1.1875rem;                                    /* 19px: h3 */
	--ci-text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19 → 22px */
	--ci-text-2xl: clamp(1.375rem, 1.3rem + 0.35vw, 1.5rem);    /* 22 → 24px: h2 */
	--ci-text-3xl: clamp(1.75rem, 1.6rem + 0.75vw, 2rem);       /* 28 → 32px: h1 */
	--ci-text-4xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);       /* 32 → 40px: display */

	--ci-leading-tight: 1.1;
	--ci-leading-snug: 1.25;
	--ci-leading-normal: 1.5;
	--ci-leading-relaxed: 1.667; /* 30px sobre 18px */

	--ci-tracking-tight: -0.01em;
	--ci-tracking-snug: -0.005em;
	--ci-tracking-normal: 0;
	--ci-tracking-wide: var(--fs-label-tracking);

	/* Espaço — escala com base 4px */
	--ci-space-1: 0.25rem; /*   4px */
	--ci-space-2: 0.5rem;  /*   8px */
	--ci-space-3: 0.75rem; /*  12px */
	--ci-space-4: 1rem;    /*  16px */
	--ci-space-5: 1.5rem;  /*  24px */
	--ci-space-6: 2rem;    /*  32px */
	--ci-space-7: 3rem;    /*  48px */
	--ci-space-8: 4rem;    /*  64px */
	--ci-space-9: 6rem;    /*  96px */
	--ci-space-10: 8rem;   /* 128px */

	--ci-space-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);   /* 16 →  40px */
	--ci-space-section: clamp(3rem, 2rem + 5vw, 6rem);      /* 48 →  96px */

	/* Ritmo do texto longo */
	--ci-flow-text: 1.25em;
	--ci-flow-h2: var(--ci-space-7);
	--ci-flow-h3: var(--ci-space-6);
	--ci-flow-h4: var(--ci-space-5);
	--ci-flow-block: var(--ci-space-6);

	/* Containers */
	--ci-container-wide: 71.25rem;      /* 1140px — interface geral */
	--ci-container-component: 55rem;    /*  880px — componentes */
	--ci-container-reading: 42.5rem;    /*  680px — coluna de leitura */

	/* Bordas e raios */
	--ci-border-width: 1px;
	--ci-radius-sm: var(--fs-radius-sm);     /* selos e etiquetas */
	--ci-radius-md: var(--fs-radius-md);     /* cards, caixas, imagens e campos */
	--ci-radius-pill: var(--fs-radius-pill); /* botões */
	--ci-radius-full: 9999px;                /* elementos circulares */

	/* Sem sombras na marca: camadas que flutuam ganham borda. */
	--ci-shadow-overlay: 0 0 0 1px var(--fs-line);

	/* Movimento — comunica estado, não decora */
	--ci-duration-fast: 120ms;
	--ci-duration-base: 200ms;
	--ci-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Foco e áreas clicáveis */
	--ci-focus-width: 2px;
	--ci-focus-offset: 2px;
	--ci-control-height: 2.75rem;    /* 44px */
	--ci-control-height-sm: 2.25rem; /* 36px */
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
 * Movimento reduzido
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--ci-duration-fast: 0.01ms;
		--ci-duration-base: 0.01ms;
	}
}