/**
 * Design tokens — Instituto Dr. Chao
 * Extraídos do Figma (Dra Chao / Azul / Terracota).
 * Frames Figma: mobile 390 / desktop 1280 (container).
 *
 * Breakpoints canônicos (literais nas @media — custom props não entram em MQ):
 *   600  — forms 2 col / paddings médios
 *   700  — carrosséis 2 slides
 *   768  — tablet (stack + chrome mobile)
 *   900  — footer 4 col / hub 3 col
 *   1024 — nav desktop / heroes split / bento / gutters 32
 */

:root {
	/* Cores — Azul */
	--idc-azul-900: #333d4f;
	--idc-azul-700: #414a5c;
	--idc-azul-500: #5c6470;
	--idc-azul-400: #5e7690; /* Figma: botão "Escolher arquivo" (upload) */

	/* Cores — Terracota / Ouro */
	--idc-terracota-800: #593400;
	--idc-terracota-700: #96602f;
	--idc-ouro: #b6873b;

	/* Neutros */
	--idc-ink: #45474c;
	--idc-cream: #fcf9f4;
	--idc-cream-warm: #f8f7f4; /* Instituto hero 133:2168 */
	--idc-sand: #e5e2dd;
	--idc-sand-warm: #f3e9db;
	--idc-peach: #f1e1cc;
	--idc-gold-soft: #ddb98c; /* CTA final Home */
	--idc-cream-soft: #f6f3ee;
	--idc-card-cream: #fbf6ef; /* Figma Blog cards 133:2566 */
	--idc-mint: #e9f0ea; /* badge Fisioterapia */
	--idc-lavender-soft: #eceaf3; /* badge Integrativa */
	--idc-orto-badge: #794900; /* texto badge Ortopedia */
	--idc-border: #c5c6cd;
	--idc-white: #ffffff;
	--idc-white-80: rgba(255, 255, 255, 0.8);
	--idc-border-soft: rgba(197, 198, 205, 0.2);

	/* Tipografia — Figma Dra Chao
	 * Montserrat: UI, corpo, títulos (Regular/Medium/SemiBold/Bold)
	 * Roboto Serif: SOMENTE spans de destaque nos títulos (.…__title-accent)
	 */
	--idc-font-sans: "Montserrat", system-ui, sans-serif;
	--idc-font-serif: "Roboto Serif", Georgia, serif;

	/* Escala tipográfica */
	--idc-text-xs: 12px;
	--idc-text-sm: 14px;
	--idc-text-md: 16px;
	--idc-text-lg: 18px;
	--idc-text-xl: 24px;
	--idc-text-2xl: 32px;
	--idc-text-3xl: 40px;
	--idc-text-4xl: 48px;

	/* Espaçamentos (Figma) */
	--idc-space-1: 4px;
	--idc-space-2: 8px;
	--idc-space-3: 12px;
	--idc-space-4: 16px;
	--idc-space-5: 20px;
	--idc-space-6: 24px;
	--idc-space-8: 32px;
	--idc-space-10: 40px;
	--idc-space-12: 48px;
	--idc-space-16: 64px;
	--idc-space-20: 80px;
	--idc-space-30: 120px;

	/* Layout */
	--idc-container: 1280px;
	--idc-gutter-desktop: 32px;
	--idc-gutter-mobile: 20px;
	--idc-header-h: 80px;

	/* Raios */
	--idc-radius-pill: 9999px;
	--idc-radius-lg: 32px;
	--idc-radius-card: 21px; /* Figma: cards de pilares, depoimentos, badges */
	--idc-radius-md: 16px;
	--idc-radius-sm: 8px;

	/* Sombras */
	--idc-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.05);
	--idc-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05);

	/* Breakpoints — referência documental (espelham os literais das @media) */
	--idc-bp-mobile: 390px;   /* frame Figma */
	--idc-bp-tablet: 768px;
	--idc-bp-desktop: 1024px; /* nav + layouts split */
	--idc-bp-wide: 1280px;    /* container max */
}