/* ==========================================================================
   Kawasaki Brasil — Design Tokens
   Identidade DARK PREMIUM derivada do logotipo oficial:
   verde-limão vibrante + preto/grafite + branco + cinza metálico.
   Fonte única de verdade para cores, tipografia, espaçamento e efeitos.
   ========================================================================== */

:root {
	/* -------------------------------------------------------------------- */
	/* Marca — verde-limão (escala derivada do logotipo)                    */
	/* -------------------------------------------------------------------- */
	--color-brand-lime-50: #f5ffe5;
	--color-brand-lime-100: #e9ffc2;
	--color-brand-lime-200: #d5ff85;
	--color-brand-lime-300: #baff3f;
	--color-brand-lime-400: #9cf000;
	--color-brand-lime-500: #7fd600;
	--color-brand-lime-600: #63ad00;
	--color-brand-lime-700: #4c8300;
	--color-brand-lime-800: #3d6705;
	--color-brand-lime-900: #35570a;

	/* -------------------------------------------------------------------- */
	/* Preto / grafite                                                      */
	/* -------------------------------------------------------------------- */
	--color-black: #050605;
	--color-black-soft: #090b09;
	--color-graphite-950: #0c0f0c;
	--color-graphite-900: #111511;
	--color-graphite-850: #161b16;
	--color-graphite-800: #1b211b;
	--color-graphite-700: #2a312a;

	/* -------------------------------------------------------------------- */
	/* Branco / cinzas                                                      */
	/* -------------------------------------------------------------------- */
	--color-white: #ffffff;
	--color-gray-50: #f7f9f7;
	--color-gray-100: #edf1ed;
	--color-gray-200: #dce2dc;
	--color-gray-300: #c7cec7;
	--color-gray-400: #9da79d;
	--color-gray-500: #778177;
	--color-gray-600: #596259;
	--color-gray-700: #414841;

	/* -------------------------------------------------------------------- */
	/* Papéis semânticos                                                    */
	/* -------------------------------------------------------------------- */
	--color-background: var(--color-black);
	--color-background-soft: var(--color-graphite-950);
	--color-surface: var(--color-graphite-900);
	--color-surface-elevated: var(--color-graphite-850);
	--color-surface-light: var(--color-gray-50);

	--color-text: var(--color-white);
	--color-text-muted: var(--color-gray-300);
	--color-text-subtle: var(--color-gray-400);
	--color-text-dark: #111511;
	--color-text-dark-muted: #505950;

	--color-primary: var(--color-brand-lime-400);
	--color-primary-hover: var(--color-brand-lime-300);
	--color-primary-active: var(--color-brand-lime-500);
	--color-primary-dark: var(--color-brand-lime-700);
	--color-on-primary: #0c0f0c; /* texto sobre o verde (alto contraste) */

	--color-border: var(--color-graphite-700);
	--color-border-dark: rgba(156, 240, 0, 0.18);
	--color-border-strong: rgba(156, 240, 0, 0.38);
	--color-border-light: #dce2dc;
	--color-focus: #baff3f;

	--color-link: var(--color-brand-lime-300);
	--color-link-hover: var(--color-brand-lime-200);

	/* Estados semânticos (ajustados para fundo escuro) */
	--color-success: #7fd600;
	--color-warning: #ffc53d;
	--color-error: #ff5a52;
	--color-info: #baff3f;

	/* WhatsApp */
	--color-whatsapp: #25d366;
	--color-whatsapp-dark: #1aa851;

	/* -------------------------------------------------------------------- */
	/* Aliases de compatibilidade (módulos/templates já criados)            */
	/* Mapeiam a paleta antiga (azul/neutros) para a nova identidade dark.  */
	/* -------------------------------------------------------------------- */
	--color-primary-50: var(--color-brand-lime-50);
	--color-primary-100: var(--color-brand-lime-100);
	--color-primary-200: var(--color-brand-lime-200);
	--color-primary-300: var(--color-brand-lime-300);
	--color-primary-400: var(--color-brand-lime-400);
	--color-primary-500: var(--color-brand-lime-500);
	--color-primary-600: var(--color-brand-lime-600);
	--color-primary-700: var(--color-brand-lime-700);
	--color-primary-800: var(--color-brand-lime-800);
	--color-primary-900: var(--color-brand-lime-900);

	--color-secondary-50: var(--color-brand-lime-50);
	--color-secondary-100: var(--color-brand-lime-100);
	--color-secondary-200: var(--color-brand-lime-200);
	--color-secondary-300: var(--color-brand-lime-300);
	--color-secondary-400: var(--color-brand-lime-400);
	--color-secondary-500: var(--color-brand-lime-500);
	--color-secondary-600: var(--color-brand-lime-500);
	--color-secondary-700: var(--color-brand-lime-400);
	--color-secondary-800: var(--color-brand-lime-800);
	--color-secondary-900: var(--color-brand-lime-900);

	--color-neutral-0: var(--color-graphite-900);
	--color-neutral-50: var(--color-graphite-850);
	--color-neutral-100: var(--color-graphite-800);
	--color-neutral-200: var(--color-graphite-700);
	--color-neutral-300: var(--color-gray-700);
	--color-neutral-400: var(--color-gray-500);
	--color-neutral-500: var(--color-gray-400);
	--color-neutral-600: var(--color-gray-300);
	--color-neutral-700: var(--color-gray-200);
	--color-neutral-800: var(--color-gray-100);
	--color-neutral-900: var(--color-white);

	/* -------------------------------------------------------------------- */
	/* Tipografia                                                           */
	/* -------------------------------------------------------------------- */
	--font-heading: "Kawasaki Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: "Kawasaki Text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-md: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
	--fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
	--fs-2xl: clamp(1.9rem, 1.5rem + 2vw, 3rem);
	--fs-3xl: clamp(2.4rem, 1.7rem + 3.4vw, 4.25rem);

	--lh-tight: 1.08;
	--lh-snug: 1.25;
	--lh-normal: 1.55;
	--lh-relaxed: 1.75;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	--measure: 68ch;

	/* -------------------------------------------------------------------- */
	/* Espaçamento                                                          */
	/* -------------------------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* -------------------------------------------------------------------- */
	/* Raios                                                                */
	/* -------------------------------------------------------------------- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-pill: 999px;

	/* -------------------------------------------------------------------- */
	/* Sombras / brilhos                                                    */
	/* -------------------------------------------------------------------- */
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
	--shadow-card: 0 18px 50px rgba(0, 0, 0, 0.35);
	--shadow-green: 0 14px 40px rgba(156, 240, 0, 0.16);
	--glow-green: 0 0 0 1px rgba(156, 240, 0, 0.35), 0 8px 30px rgba(156, 240, 0, 0.22);

	/* -------------------------------------------------------------------- */
	/* Layout                                                               */
	/* -------------------------------------------------------------------- */
	--container-max: 75rem;
	--container-wide: 88rem;
	--container-pad: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
	--header-height: 112px;
	--logo-height-desktop: 92px;
	--logo-height-mobile: 64px;

	--touch-min: 44px;

	--transition-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);

	--z-header: 100;
	--z-menu: 200;
	--z-float: 300;
	--z-modal: 400;
	--z-skiplink: 500;

	color-scheme: dark;
}