/* ==========================================================================
   Porownai design tokens — the ONLY place for raw colors, radii, spacing.
   Every other stylesheet uses var(--…).
   ========================================================================== */

:root {
	/* Brand */
	--color-accent: #7a5bff;             /* electric violet — CTA, one word in headings, icons */
	--color-accent-hover: #6a4aef;
	--color-accent-soft: #a999ff;        /* accent on dark backgrounds */
	--color-primary: #7f77dd;            /* mesh nodes, soft outlines */
	--color-indigo: #534ab7;             /* links on light, chip text */
	--color-deep: #26215c;               /* deep navy-violet */
	--color-lavender: #eeedfe;           /* chips, icon tiles */

	/* Surfaces */
	--color-bg: #f7f6fb;
	--color-surface: #ffffff;
	--color-dark: #0e0b16;               /* dark bands, footer */
	--color-prompt: #100d1e;             /* prompt blocks, closing strip */
	--color-dark-surface: rgba(255, 255, 255, .04);

	/* Text */
	--color-text: #15121f;
	--color-text-soft: #3a3450;          /* nav links */
	--color-text-prose: #3f3a54;         /* article body text */
	--color-text-muted: #5b556e;         /* paragraphs */
	--color-text-subtle: #8b85a0;        /* labels, meta */
	--color-text-faint: #9b95b0;
	--color-on-dark: #ffffff;
	--color-on-dark-muted: #b8b2c8;
	--color-on-dark-subtle: #8b85a0;
	--color-on-dark-faint: #6f6886;

	/* Borders */
	--color-border: rgba(38, 33, 92, .12);
	--color-border-strong: rgba(38, 33, 92, .16);
	--color-border-soft: rgba(38, 33, 92, .08);
	--color-border-accent: rgba(122, 91, 255, .55);
	--color-border-dark: rgba(255, 255, 255, .1);

	/* Accent tints */
	--color-accent-tint: rgba(122, 91, 255, .14);
	--color-accent-tint-border: rgba(122, 91, 255, .3);
	--color-primary-tint-border: rgba(127, 119, 221, .35);

	/* Typography */
	--font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-xs: .75rem;      /* 12  — mono labels */
	--fs-sm: .875rem;     /* 14 */
	--fs-base: 1rem;      /* 16 */
	--fs-md: 1.0625rem;   /* 17  — card titles */
	--fs-lg: 1.25rem;     /* 20 */
	--fs-h1: clamp(2.5rem, 6.4vw, 4.75rem);
	--fs-h2: clamp(1.875rem, 4vw, 2.875rem);
	--fs-h2-sm: clamp(1.625rem, 3.4vw, 2.375rem);
	--fs-lead: clamp(1rem, 1.9vw, 1.25rem);
	--fs-stat: clamp(2.125rem, 4.5vw, 3.25rem);

	--lh-tight: 1.05;
	--lh-snug: 1.25;
	--lh-body: 1.65;
	--tracking-tight: -.03em;
	--tracking-label: .12em;

	/* Radius */
	--radius-xs: 7px;     /* mono chips */
	--radius-sm: 11px;    /* buttons, icon buttons */
	--radius-md: 16px;    /* small cards, search bar */
	--radius-lg: 18px;    /* cards */
	--radius-xl: 20px;    /* bento tiles */
	--radius-2xl: 24px;   /* feature panels */
	--radius-pill: 999px;

	/* Spacing scale */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 18px;
	--space-lg: 26px;
	--space-xl: 40px;
	--space-2xl: 64px;
	--space-section: clamp(56px, 8vw, 90px);

	/* Layout */
	--container-width: 1240px;
	--container-narrow: 760px;
	--gutter: 28px;
	--header-height: 72px;

	/* Inline icons for CSS (mask / background) */
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23534AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

	--icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.2l2.7 2.7L16 9.6'/%3E%3C/svg%3E");

	/* Effects */
	--shadow-sm: 0 12px 40px rgba(38, 33, 92, .08);
	--shadow-card-hover: 0 16px 40px rgba(38, 33, 92, .1);
	--shadow-accent: 0 8px 24px rgba(122, 91, 255, .32);
	--shadow-accent-dark: 0 16px 40px rgba(122, 91, 255, .18);
	--ease-out: cubic-bezier(.2, .7, .3, 1);
	--transition: .3s var(--ease-out);
}

@media (max-width: 620px) {
	:root {
		--gutter: 20px;
	}
}