/**
 * Comece Imperfeito — tokens.css
 *
 * Fonte única de verdade do Design System global: fontes, cores, tipografia,
 * espaço, containers, bordas, sombras, movimento e foco.
 * Componentes, páginas e o Kit do Elementor consomem estes valores.
 *
 * Pontos de quebra (referência; variáveis CSS não funcionam em @media),
 * alinhados ao Elementor:
 *   mobile  ≤ 767px
 *   tablet  768px – 1024px
 *   desktop ≥ 1025px
 *   wide    ≥ 1280px
 */

/* -------------------------------------------------------------------------
 * Inter — hospedada localmente (fonte variável: pesos 100–900 em um arquivo).
 * O Design System usa 400, 500 e 600, além de 400 itálico.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.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: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.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: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-italic-latin.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: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-italic-latin-ext.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;
}

/* -------------------------------------------------------------------------
 * Tokens — Light Mode (padrão)
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* Paleta da marca — não alterar */
	--ci-ink: #111111;
	--ci-graphite: #444444;
	--ci-stone: #D9D9D6;
	--ci-paper: #F7F7F5;

	/* Cores funcionais (contraste sobre o fundo entre parênteses) */
	--ci-color-bg: var(--ci-paper);
	--ci-color-surface: #FFFFFF;
	--ci-color-surface-sunken: #EFEFEC;
	--ci-color-text: var(--ci-ink);                /* 17,8:1 */
	--ci-color-text-secondary: var(--ci-graphite); /*  9,1:1 */
	--ci-color-text-tertiary: #6B6B68;             /*  5,4:1 */
	--ci-color-border: var(--ci-stone);            /* divisores, decorativo */
	--ci-color-border-strong: #8A8A86;             /*  3,2:1 — controles */
	--ci-color-link-underline: #8A8A86;
	--ci-color-action: var(--ci-ink);
	--ci-color-action-hover: #2B2B2B;
	--ci-color-action-active: var(--ci-graphite);
	--ci-color-on-action: var(--ci-paper);
	--ci-color-focus: var(--ci-ink);
	--ci-color-selection: var(--ci-stone);
	--ci-color-disabled-bg: var(--ci-stone);
	--ci-color-disabled-text: #6B6B68;
	--ci-color-media-bg: transparent;
	--ci-color-media-outline: rgb(17 17 17 / 0.06);

	/* Tipografia */
	--ci-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ci-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ci-weight-regular: 400;
	--ci-weight-medium: 500;
	--ci-weight-semibold: 600;

	/* Escala fluida: celular (320px) → desktop */
	--ci-text-xs: 0.8125rem;                                  /* 13px */
	--ci-text-sm: 0.875rem;                                   /* 14px */
	--ci-text-base: 1rem;                                     /* 16px */
	--ci-text-prose: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16 → 17px */
	--ci-text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);  /* 18 → 20px */
	--ci-text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);    /* 20 → 24px */
	--ci-text-2xl: clamp(1.5rem, 1.36rem + 0.7vw, 1.875rem);   /* 24 → 30px */
	--ci-text-3xl: clamp(1.875rem, 1.62rem + 1.25vw, 2.5rem);  /* 30 → 40px */
	--ci-text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);     /* 36 → 52px */

	--ci-leading-tight: 1.15;
	--ci-leading-snug: 1.3;
	--ci-leading-normal: 1.5;
	--ci-leading-relaxed: 1.7;

	--ci-tracking-tight: -0.02em;
	--ci-tracking-snug: -0.01em;
	--ci-tracking-normal: 0;
	--ci-tracking-wide: 0.06em;

	/* 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(1.25rem, 0.8rem + 2.2vw, 2.5rem);  /*  20 →  40px */
	--ci-space-section: clamp(4rem, 2.7rem + 6.5vw, 8rem);      /*  64 → 128px */

	/* 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: 4px;      /* botões, campos, etiquetas */
	--ci-radius-md: 6px;      /* imagens e molduras */
	--ci-radius-full: 9999px; /* apenas elementos circulares */

	/* Sombra — só para camadas que flutuam (submenus, menu mobile) */
	--ci-shadow-overlay: 0 1px 2px rgb(17 17 17 / 0.04), 0 8px 24px rgb(17 17 17 / 0.08);

	/* 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: 3px;
	--ci-control-height: 2.75rem;    /* 44px */
	--ci-control-height-sm: 2.25rem; /* 36px */
}

/* -------------------------------------------------------------------------
 * Tokens — Dark Mode
 * Ativado por data-theme="dark" no <html> (ver functions.php).
 * Adaptação, não inversão: cinzas quentes, sem preto nem branco absolutos.
 * Imagens nunca recebem filtro; podem ficar sobre --ci-color-media-bg.
 * ---------------------------------------------------------------------- */

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

	--ci-color-bg: #141413;
	--ci-color-surface: #1C1C1B;
	--ci-color-surface-sunken: #0F0F0E;
	--ci-color-text: #EDEDEA;           /* 15,7:1 */
	--ci-color-text-secondary: #B4B4B0; /*  8,9:1 */
	--ci-color-text-tertiary: #8E8E8A;  /*  5,6:1 */
	--ci-color-border: #2E2E2C;
	--ci-color-border-strong: #6E6E6A;  /*  3,6:1 */
	--ci-color-link-underline: #6E6E6A;
	--ci-color-action: #EDEDEA;
	--ci-color-action-hover: var(--ci-stone);
	--ci-color-action-active: #B4B4B0;
	--ci-color-on-action: #141413;
	--ci-color-focus: #EDEDEA;
	--ci-color-selection: #3A3A38;
	--ci-color-disabled-bg: #2E2E2C;
	--ci-color-disabled-text: #8E8E8A;
	--ci-color-media-bg: var(--ci-paper);
	--ci-color-media-outline: transparent;

	--ci-shadow-overlay: 0 0 0 1px var(--ci-color-border), 0 8px 24px rgb(0 0 0 / 0.4);
}

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

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

/* -------------------------------------------------------------------------
 * Ponte com o Elementor: as cores globais do Kit passam a apontar para os
 * tokens, para que widgets que usam cores globais acompanhem o Dark Mode.
 * ---------------------------------------------------------------------- */

body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--ci-color-text);
	--e-global-color-secondary: var(--ci-color-text-secondary);
	--e-global-color-text: var(--ci-color-text);
	--e-global-color-accent: var(--ci-color-action);
	--e-global-color-cibg: var(--ci-color-bg);
	--e-global-color-cisurfc: var(--ci-color-surface);
	--e-global-color-citext3: var(--ci-color-text-tertiary);
	--e-global-color-cibordr: var(--ci-color-border);
	--e-global-color-cibrdst: var(--ci-color-border-strong);
}