/**
 * Design tokens — primitives and semantic variables.
 *
 * @package Fundamento
 */

:root {
	/* -------------------------------------------------------------------------
	   Color primitives — Green
	   ------------------------------------------------------------------------- */
	--color-green-50: #ccffec;
	--color-green-100: #9de7c9;
	--color-green-200: #82d3b2;
	--color-green-300: #4eb891;
	--color-green-400: #2a9d77;
	--color-green-500: #27996f;
	--color-green-600: #1b7e5e;
	--color-green-700: #15654e;
	--color-green-800: #175844;
	--color-green-900: #10533f;

	/* -------------------------------------------------------------------------
	   Color primitives — Blue
	   ------------------------------------------------------------------------- */
	--color-blue-50: #cfe6fa;
	--color-blue-100: #bce0ff;
	--color-blue-200: #9ccdf4;
	--color-blue-300: #6db2ed;
	--color-blue-400: #4a94e7;
	--color-blue-500: #357bdb;
	--color-blue-600: #2166c7;
	--color-blue-700: #2a51a3;
	--color-blue-800: #274681;
	--color-blue-900: #1c2c4f;

	/* -------------------------------------------------------------------------
	   Color primitives — Neutral
	   ------------------------------------------------------------------------- */
	--color-neutral-0: #ffffff;
	--color-neutral-50: #f8f7f4;
	--color-neutral-100: #efede5;
	--color-neutral-200: #e6e1d8;
	--color-neutral-300: #c6c1b9;
	--color-neutral-400: #837453;
	--color-neutral-500: #6a675f;
	--color-neutral-600: #59554f;
	--color-neutral-700: #45433f;
	--color-neutral-800: #34322f;
	--color-neutral-900: #1b1b1b;

	/* -------------------------------------------------------------------------
	   Semantic — Background
	   ------------------------------------------------------------------------- */
	--color-bg-default: var(--color-neutral-50);
	--color-bg-subtle: var(--color-neutral-100);
	--color-bg-muted: var(--color-neutral-100);
	--color-bg-emphasis: var(--color-neutral-200);
	--color-bg-inverse: var(--color-neutral-800);
	--color-bg-brand: var(--color-green-800);
	--color-bg-brand-subtle: var(--color-green-50);

	/* -------------------------------------------------------------------------
	   Semantic — Surface
	   ------------------------------------------------------------------------- */
	--color-surface-default: var(--color-neutral-0);
	--color-surface-raised: var(--color-neutral-50);
	--color-surface-overlay: var(--color-neutral-100);
	--color-surface-brand: var(--color-green-800);
	--color-surface-brand-subtle: var(--color-green-50);
	--color-surface-accent: var(--color-blue-50);

	/* -------------------------------------------------------------------------
	   Semantic — Text
	   ------------------------------------------------------------------------- */
	--color-text-default: var(--color-neutral-900);
	--color-text-subtle: var(--color-neutral-500);
	--color-text-muted: var(--color-neutral-400);
	--color-text-disabled: var(--color-neutral-300);
	--color-text-inverse: var(--color-neutral-0);
	--color-text-brand: var(--color-green-800);
	--color-text-brand-subtle: var(--color-green-600);
	--color-text-on-brand: var(--color-neutral-0);
	--color-text-accent: var(--color-blue-50);

	/* -------------------------------------------------------------------------
	   Semantic — Border
	   ------------------------------------------------------------------------- */
	--color-border-default: var(--color-neutral-200);
	--color-border-subtle: var(--color-neutral-300);
	--color-border-strong: var(--color-neutral-400);
	--color-border-brand: var(--color-green-800);
	--color-border-brand-subtle: var(--color-green-200);

	/* -------------------------------------------------------------------------
	   Semantic — Brand
	   ------------------------------------------------------------------------- */
	--color-brand-default: var(--color-green-800);
	--color-brand-hover: var(--color-green-600);
	--color-brand-active: var(--color-green-900);
	--color-brand-subtle: var(--color-green-50);
	--color-brand-muted: var(--color-green-200);
	--color-brand-emphasis: var(--color-green-600);

	/* -------------------------------------------------------------------------
	   Semantic — Accent
	   ------------------------------------------------------------------------- */
	--color-accent-default: var(--color-blue-600);
	--color-accent-subtle: var(--color-blue-50);
	--color-accent-muted: var(--color-blue-200);

	/* -------------------------------------------------------------------------
	   Semantic — Icon
	   ------------------------------------------------------------------------- */
	--color-icon-default: var(--color-neutral-900);
	--color-icon-subtle: var(--color-neutral-400);
	--color-icon-disabled: var(--color-neutral-200);
	--color-icon-inverse: var(--color-neutral-0);
	--color-icon-brand: var(--color-green-800);
	--color-icon-brand-subtle: var(--color-green-400);
	--color-icon-accent: var(--color-blue-50);

	/* -------------------------------------------------------------------------
	   Typography — Font families
	   ------------------------------------------------------------------------- */
	--font-family-display: "Season Mix Trial", Georgia, "Times New Roman", serif;
	--font-family-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

	/* -------------------------------------------------------------------------
	   Typography — Display (Season Mix, LH 120%)
	   ------------------------------------------------------------------------- */
	--text-display-h1-alt-size: 3.75rem;
	--text-display-h1-alt-lh: 1.2;
	--text-display-h1-alt-ls: -0.04rem;

	--text-display-h2-size: 3rem;
	--text-display-h2-lh: 1.2;
	--text-display-h2-ls: -0.0125rem;

	--text-display-h3-size: 2.5rem;
	--text-display-h3-lh: 1.2;
	--text-display-h3-ls: -0.048rem;

	--text-display-h4-size: 1.75rem;
	--text-display-h4-lh: 1.2;
	--text-display-h4-ls: -0.0125rem;

	--text-display-h5-size: 1.375rem;
	--text-display-h5-lh: 1.2;
	--text-display-h5-ls: -0.0125rem;

	--text-display-h6-size: 1.25rem;
	--text-display-h6-lh: 1.2;
	--text-display-h6-ls: -0.048rem;

	--text-display-h6-medium-size: 1.25rem;
	--text-display-h6-medium-lh: 1.2;
	--text-display-h6-medium-ls: -0.048rem;

	--text-display-h7-size: 1.125rem;
	--text-display-h7-lh: 1.2;
	--text-display-h7-ls: -0.048rem;

	/* -------------------------------------------------------------------------
	   Typography — Body (IBM Plex Sans)
	   ------------------------------------------------------------------------- */
	--text-body-xl-size: 1.25rem;
	--text-body-xl-lh: 1.3;
	--text-body-xl-ls: -0.0125rem;

	--text-body-lg-size: 1.125rem;
	--text-body-lg-lh: 1.4;
	--text-body-lg-ls: -0.015rem;

	--text-body-md-size: 1rem;
	--text-body-md-lh: 1.4;
	--text-body-md-ls: 0;

	--text-body-sm-size: 0.875rem;
	--text-body-sm-lh: 1.4;
	--text-body-sm-ls: 0;

	--text-body-sm-medium-ls: -0.0044rem;

	/* -------------------------------------------------------------------------
	   Spacing scale
	   ------------------------------------------------------------------------- */
	--space-0: 0;
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-28: 1.75rem;
	--space-32: 2rem;
	--space-36: 2.25rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-112: 7rem;
	--space-128: 8rem;
	--space-160: 10rem;
	--space-192: 12rem;
	--space-224: 14rem;
	--space-256: 16rem;
	--space-320: 20rem;

	/* -------------------------------------------------------------------------
	   Border radius
	   ------------------------------------------------------------------------- */
	--radius-none: 0;
	--radius-xs: 0.25rem;
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.25rem;
	--radius-xl: 2.5rem;
	--radius-full: 9999px;

	/* -------------------------------------------------------------------------
	   Layout — Container
	   ------------------------------------------------------------------------- */
	--container-max-width: 80rem;
	--container-padding-inline: var(--space-16);
	--container-padding-inline-lg: var(--space-32);
	--section-padding-block: var(--space-80);
}