/* ==========================================================================
   CMath — Design Tokens  (GERADO — não editar à mão)
   Fonte: docker/variables/*.json (Figma Variables).  Regenerar:
     python3 docker/variables/build-tokens.py

   Camada 1: primitivos.  Camada 2: semânticos (via var()).
   Cor: float Figma -> 0-255; alpha preservado (#rrggbb ou rgb(r g b / a)).
   Responsivo (Typography + Responsive): Desktop em :root, Mobile no @media.
   Acoplamento intencional: sizes de tipografia e tokens responsivos
   aliasam a escala de Spacing primitives (ex.: H1 size = var(--space-400)).
   Breakpoint mobile: 767px (mudar no @media no fim do ficheiro).
   ========================================================================== */

:root {
	/* --- Color primitives --- */
	--color-brand-blue: #ABDBCB;
	--color-brand-brick: #AF554D;
	--color-brand-chalk-board: #334B4A;
	--color-brand-color: #FFFFFF;
	--color-brand-dark-turquoise: #1E3737;
	--color-brand-gold: #C29E67;
	--color-brand-grayish-blue: #95B1AF;
	--color-brand-greenish-gold: #C2B98F;
	--color-brand-light-blue: #E5F3F3;
	--color-brand-samon: #F1E0CE;
	--color-brand-teal-darker: #148482;
	--color-brand-teal-lighter: #30ABA8;
	--color-brand-teal-original: #2E9896;
	--color-green-100: #EBFFEE;
	--color-green-200: #CFF7D3;
	--color-green-300: #AFF4C6;
	--color-green-400: #85E0A3;
	--color-green-500: #14AE5C;
	--color-green-600: #009951;
	--color-green-700: #008043;
	--color-green-800: #02542D;
	--color-green-900: #024023;
	--color-green-1000: #062D1B;
	--color-red-100: #FEE9E7;
	--color-red-200: #FDD3D0;
	--color-red-300: #FCB3AD;
	--color-red-400: #F4776A;
	--color-red-500: #EC221F;
	--color-red-600: #C00F0C;
	--color-red-700: #900B09;
	--color-red-800: #690807;
	--color-red-900: #4D0B0A;
	--color-red-1000: #300603;
	--color-yellow-100: #FFFBEB;
	--color-yellow-200: #FFF1C2;
	--color-yellow-300: #FFE8A3;
	--color-yellow-400: #E8B931;
	--color-yellow-500: #E5A000;
	--color-yellow-600: #BF6A02;
	--color-yellow-700: #975102;
	--color-yellow-800: #682D03;
	--color-yellow-900: #522504;
	--color-yellow-1000: #401B01;
	--color-gray-100: #F5F5F5;
	--color-gray-200: #E6E6E6;
	--color-gray-300: #D9D9D9;
	--color-gray-400: #B3B3B3;
	--color-gray-500: #757575;
	--color-gray-600: #444444;
	--color-gray-700: #383838;
	--color-gray-800: #2C2C2C;
	--color-gray-900: #1E1E1E;
	--color-gray-1000: #111111;
	--color-black-100: rgb(12 12 13 / 0.05);
	--color-black-200: rgb(12 12 13 / 0.1);
	--color-black-300: rgb(12 12 13 / 0.2);
	--color-black-400: rgb(12 12 13 / 0.4);
	--color-black-500: rgb(12 12 13 / 0.7);
	--color-black-600: rgb(12 12 13 / 0.8);
	--color-black-700: rgb(12 12 13 / 0.85);
	--color-black-800: rgb(12 12 13 / 0.9);
	--color-black-900: rgb(12 12 13 / 0.95);
	--color-black-1000: #0C0C0D;
	--color-white-100: rgb(255 255 255 / 0.05);
	--color-white-200: rgb(255 255 255 / 0.1);
	--color-white-300: rgb(255 255 255 / 0.2);
	--color-white-400: rgb(255 255 255 / 0.4);
	--color-white-500: rgb(255 255 255 / 0.7);
	--color-white-600: rgb(255 255 255 / 0.8);
	--color-white-700: rgb(255 255 255 / 0.85);
	--color-white-800: rgb(255 255 255 / 0.9);
	--color-white-900: rgb(255 255 255 / 0.95);
	--color-white-1000: #FFFFFF;
	--color-blue-100: #DDDDFF;
	--color-blue-500: #3030FF;
	--color-blue-1000: #00007F;
	--color-adjusted-brand-green: #A3B882;
	--color-adjusted-brand-light-gold: #F7F4EF;
	--color-adjusted-brand-orange: #F0CA7A;

	/* --- Semantic colors (aliases to primitives) --- */
	--color-text-accent: var(--color-brand-teal-original);
	--color-text-alt: var(--color-brand-brick);
	--color-text-danger: var(--color-red-600);
	--color-text-default: var(--color-brand-dark-turquoise);
	--color-text-disabled: var(--color-black-300);
	--color-text-inverse: var(--color-adjusted-brand-light-gold);
	--color-text-link: var(--color-blue-500);
	--color-text-secondary: var(--color-brand-grayish-blue);
	--color-text-success: var(--color-green-700);
	--color-text-warning: var(--color-yellow-600);
	--color-text-white: var(--color-white-1000);
	--color-border-accent: var(--color-brand-teal-original);
	--color-border-bold: var(--color-brand-chalk-board);
	--color-border-danger: var(--color-red-600);
	--color-border-default: var(--color-brand-brick);
	--color-border-disabled: var(--color-black-300);
	--color-border-input: var(--color-gray-400);
	--color-border-neutral: var(--color-brand-grayish-blue);
	--color-border-success: var(--color-green-500);
	--color-border-warning: var(--color-yellow-500);
	--color-bg-danger-bold: var(--color-red-600);
	--color-bg-danger-bold-hover: var(--color-red-700);
	--color-bg-danger-default: var(--color-red-100);
	--color-bg-danger-default-hover: var(--color-red-200);
	--color-bg-default-default: var(--color-adjusted-brand-light-gold);
	--color-bg-default-default-hover: #F3EBDE;
	--color-bg-disabled: var(--color-black-200);
	--color-bg-success-bold: var(--color-green-500);
	--color-bg-success-bold-hover: var(--color-green-600);
	--color-bg-success-default: var(--color-green-200);
	--color-bg-success-default-hover: var(--color-green-300);
	--color-bg-warning-bold: var(--color-yellow-400);
	--color-bg-warning-bold-hover: var(--color-yellow-500);
	--color-bg-warning-default: var(--color-yellow-100);
	--color-bg-warning-default-hover: var(--color-yellow-200);
	--color-icon-accent: #DB28D5;
	--color-icon-danger: var(--color-red-600);
	--color-icon-default: var(--color-brand-dark-turquoise);
	--color-icon-disabled: var(--color-black-300);
	--color-icon-inverse: var(--color-white-1000);
	--color-icon-secondary: var(--color-gray-500);
	--color-icon-success: var(--color-green-500);
	--color-icon-terciary: var(--color-gray-400);
	--color-icon-warning: var(--color-yellow-500);
	--color-overlay-disabled: rgb(217 217 217 / 0.64);

	/* --- Spacing primitives (nome Figma = nome do token; 100 = 16px) --- */
	--space-12: 2px;
	--space-25: 4px;
	--space-50: 8px;
	--space-75: 12px;
	--space-88: 14px;
	--space-100: 16px;
	--space-113: 18px;
	--space-125: 20px;
	--space-138: 22px;
	--space-150: 24px;
	--space-162: 26px;
	--space-180: 28px;
	--space-200: 32px;
	--space-250: 40px;
	--space-300: 48px;
	--space-400: 64px;
	--space-500: 80px;
	--space-600: 96px;
	--space-700: 112px;
	--space-negative-25: -4px;
	--space-negative-50: -8px;
	--space-negative-100: -16px;
	--space-negative-200: -32px;

	/* --- Radius / Border --- */
	--border-width-default: 2px;
	--border-width-selected: 2px;
	--radius-full: 900px;
	--radius-l: var(--space-180);  /* aliasa Spacing primitive */
	--radius-m: var(--space-100);  /* aliasa Spacing primitive */
	--radius-s: var(--space-50);  /* aliasa Spacing primitive */
	--radius-xs: var(--space-25);  /* aliasa Spacing primitive */
	--radius-xxs: var(--space-12);  /* aliasa Spacing primitive */

	/* --- Font families --- */
	--font-family-headers: "Merriweather", serif;
	--font-family-mono: "Roboto Mono", monospace;
	--font-family-paragraph: "Roboto", sans-serif;

	/* --- Semantic typography (size/weight; sizes alias Spacing primitives) - Desktop --- */
	--font-h1-family: var(--font-family-headers);
	--font-h1-size: var(--space-400);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h1-weight: 700;
	--font-h2-family: var(--font-family-headers);
	--font-h2-size: var(--space-300);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h2-weight: 700;
	--font-h3-family: var(--font-family-headers);
	--font-h3-size: var(--space-250);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h3-weight: 700;
	--font-h4-family: var(--font-family-headers);
	--font-h4-size: var(--space-200);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h4-weight: 800;
	--font-h5-family: var(--font-family-headers);
	--font-h5-size: var(--space-150);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h5-weight: 800;
	--font-h6-family: var(--font-family-headers);
	--font-h6-size: var(--space-125);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-h6-weight: 800;
	--font-body-family: var(--font-family-paragraph);
	--font-body-size: var(--space-100);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-body-weight: 400;
	--font-label-m-family: var(--font-family-paragraph);
	--font-label-m-size: var(--space-88);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-label-m-weight: 400;
	--font-label-s-family: var(--font-family-paragraph);
	--font-label-s-size: var(--space-75);  /* size = escala de Spacing primitives (acoplamento do Figma) */
	--font-label-s-weight: 400;

	/* --- Tokens responsivos (Grid / Blocos / Max width) — Desktop --- */
	--grid-gutter: var(--space-200);  /* aliasa Spacing primitives (acoplamento do Figma) */
	--grid-margins: var(--space-400);  /* aliasa Spacing primitives (acoplamento do Figma) */
	--block-padding-m: var(--space-500);  /* aliasa Spacing primitives (acoplamento do Figma) */
	--block-padding-s: var(--space-250);  /* aliasa Spacing primitives (acoplamento do Figma) */
	--max-width-content: 1200px;
	--max-width-services-grid: 900px;
	--max-width-text: 600px;
}

/* ==========================================================================
   MOBILE — só os tokens que mudam (Figma: modo Mobile)
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--font-h1-size: var(--space-250);
		--font-h2-size: var(--space-200);
		--font-h3-size: var(--space-162);
		--font-h4-size: var(--space-138);
		--font-h5-size: var(--space-125);
		--font-h6-size: var(--space-113);
		--grid-gutter: var(--space-100);
		--grid-margins: var(--space-100);
		--block-padding-m: var(--space-300);
		--block-padding-s: var(--space-150);
		--max-width-content: 1000px;
	}
}