/*
 * Design tokens do tema.
 *
 * Responsabilidade: centralizar valores reutilizaveis de cor, tipografia,
 * espacamento, grid, bordas, sombras, transicoes e breakpoints.
 */

:root {
	/* Color system: brand. */
	--rnen-color-primary-50: #fff1f5;
	--rnen-color-primary-100: #ffe3ec;
	--rnen-color-primary-200: #ffc6d8;
	--rnen-color-primary-300: #ff98b9;
	--rnen-color-primary-400: #f85f91;
	--rnen-color-primary-500: #d92f6a;
	--rnen-color-primary-600: #b51f55;
	--rnen-color-primary-700: #8f1844;
	--rnen-color-primary-800: #70163a;
	--rnen-color-primary-900: #51132d;

	--rnen-color-secondary-50: #eef8ff;
	--rnen-color-secondary-100: #d8efff;
	--rnen-color-secondary-200: #b9e1ff;
	--rnen-color-secondary-300: #88ccf5;
	--rnen-color-secondary-400: #4daee5;
	--rnen-color-secondary-500: #238bc5;
	--rnen-color-secondary-600: #176fa1;
	--rnen-color-secondary-700: #145982;
	--rnen-color-secondary-800: #164b6b;
	--rnen-color-secondary-900: #153d58;

	/* Color system: neutral. */
	--rnen-color-neutral-0: #ffffff;
	--rnen-color-neutral-50: #f8f7f6;
	--rnen-color-neutral-100: #eeecea;
	--rnen-color-neutral-200: #ded9d5;
	--rnen-color-neutral-300: #c6bfb8;
	--rnen-color-neutral-400: #a49b94;
	--rnen-color-neutral-500: #7d746d;
	--rnen-color-neutral-600: #5f5751;
	--rnen-color-neutral-700: #453f3b;
	--rnen-color-neutral-800: #2e2a27;
	--rnen-color-neutral-900: #1d1a18;

	/* Color system: states. */
	--rnen-color-success: #1f7a4d;
	--rnen-color-success-soft: #e7f5ee;
	--rnen-color-warning: #a76300;
	--rnen-color-warning-soft: #fff4dd;
	--rnen-color-error: #b42318;
	--rnen-color-error-soft: #fff0ee;
	--rnen-color-info: #176fa1;
	--rnen-color-info-soft: #eef8ff;

	/* Semantic colors. */
	--rnen-color-background: var(--rnen-color-neutral-0);
	--rnen-color-surface: var(--rnen-color-neutral-50);
	--rnen-color-surface-raised: var(--rnen-color-neutral-0);
	--rnen-color-border: var(--rnen-color-neutral-200);
	--rnen-color-border-strong: var(--rnen-color-neutral-300);
	--rnen-color-text: var(--rnen-color-neutral-900);
	--rnen-color-text-muted: var(--rnen-color-neutral-600);
	--rnen-color-text-inverse: var(--rnen-color-neutral-0);
	--rnen-color-link: var(--rnen-color-primary-700);
	--rnen-color-link-hover: var(--rnen-color-primary-800);
	--rnen-color-focus: var(--rnen-color-secondary-500);

	/* Typography families. */
	--rnen-font-family-base: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--rnen-font-family-heading: var(--rnen-font-family-base);

	/* Typography scale. */
	--rnen-font-size-xs: 0.75rem;
	--rnen-font-size-sm: 0.875rem;
	--rnen-font-size-md: 1rem;
	--rnen-font-size-lg: 1.125rem;
	--rnen-font-size-xl: 1.25rem;
	--rnen-font-size-2xl: 1.5rem;
	--rnen-font-size-3xl: 1.875rem;
	--rnen-font-size-4xl: 2.25rem;
	--rnen-font-size-5xl: 3rem;

	--rnen-line-height-tight: 1.15;
	--rnen-line-height-heading: 1.2;
	--rnen-line-height-base: 1.6;
	--rnen-line-height-loose: 1.75;

	--rnen-font-weight-regular: 400;
	--rnen-font-weight-medium: 500;
	--rnen-font-weight-semibold: 600;
	--rnen-font-weight-bold: 700;

	/* Spacing scale. */
	--rnen-space-0: 0;
	--rnen-space-1: 0.25rem;
	--rnen-space-2: 0.5rem;
	--rnen-space-3: 0.75rem;
	--rnen-space-4: 1rem;
	--rnen-space-5: 1.25rem;
	--rnen-space-6: 1.5rem;
	--rnen-space-8: 2rem;
	--rnen-space-10: 2.5rem;
	--rnen-space-12: 3rem;
	--rnen-space-16: 4rem;
	--rnen-space-20: 5rem;
	--rnen-space-24: 6rem;

	/* Layout and grid. */
	--rnen-container-max-width: 72rem;
	--rnen-container-narrow-width: 48rem;
	--rnen-container-wide-width: 82rem;
	--rnen-container-padding: var(--rnen-space-4);
	--rnen-grid-columns: 12;
	--rnen-grid-gap: var(--rnen-space-6);

	/* Breakpoint tokens for documentation and JS alignment. */
	--rnen-breakpoint-sm: 36rem;
	--rnen-breakpoint-md: 48rem;
	--rnen-breakpoint-lg: 64rem;
	--rnen-breakpoint-xl: 80rem;

	/* Borders and radius. */
	--rnen-border-width: 1px;
	--rnen-border-style: solid;
	--rnen-radius-xs: 0.125rem;
	--rnen-radius-sm: 0.25rem;
	--rnen-radius-md: 0.5rem;
	--rnen-radius-lg: 0.75rem;
	--rnen-radius-full: 999px;

	/* Shadows. */
	--rnen-shadow-xs: 0 1px 2px rgb(29 26 24 / 0.06);
	--rnen-shadow-sm: 0 4px 12px rgb(29 26 24 / 0.08);
	--rnen-shadow-md: 0 10px 24px rgb(29 26 24 / 0.1);
	--rnen-shadow-lg: 0 18px 48px rgb(29 26 24 / 0.12);

	/* Transitions. */
	--rnen-transition-duration-fast: 120ms;
	--rnen-transition-duration-base: 200ms;
	--rnen-transition-duration-slow: 320ms;
	--rnen-transition-timing: ease;
	--rnen-transition-base: var(--rnen-transition-duration-base) var(--rnen-transition-timing);

	/* Shared UI system. */
	--rnen-section-padding-y: var(--rnen-space-16);
	--rnen-section-padding-y-tablet: var(--rnen-space-12);
	--rnen-section-padding-y-mobile: var(--rnen-space-10);
	--rnen-title-max-width: 28ch;
	--rnen-text-max-width: 44rem;
	--rnen-hero-title-max-width: 20ch;
	--rnen-hero-media-width: 36rem;
	--rnen-hero-media-ratio: 16 / 12;
	--rnen-card-padding: var(--rnen-space-6);
	--rnen-card-radius: var(--rnen-radius-lg);
	--rnen-card-shadow: var(--rnen-shadow-sm);
	--rnen-button-min-height: 3rem;
	--rnen-button-padding-y: var(--rnen-space-3);
	--rnen-button-padding-x: var(--rnen-space-5);
	--rnen-button-radius: var(--rnen-radius-full);

	/* Z-index scale. */
	--rnen-z-index-base: 1;
	--rnen-z-index-header: 20;
	--rnen-z-index-overlay: 40;
	--rnen-z-index-modal: 60;
}