/**
 * Design tokens.
 *
 * Global variables consumed by every atom, molecule, organism and section.
 * Override these per-site, per-brand, or per-theme to re-skin everything
 * downstream without touching component CSS.
 *
 * Component-level tokens (--mt-button-*, --mt-card-*, etc.) live in the
 * component's own CSS and fall back to these globals.
 *
 * @package OpcinaTema
 */

:root {
	/* -- Brand colors -- */
	/* Generic default brand: primary = institutional blue, secondary accent =  */
	/* teal (--mt-color-accent below). Override per-site via the Colors admin    */
	/* picker (DB) or a child theme (opcina_tema/color_defaults + tokens).       */
	--mt-color-primary: #2c5282;
	--mt-color-primary-hover: #335f97;
	--mt-color-primary-contrast: #ffffff;
	--mt-color-primary-soft: rgba(44, 82, 130, 0.1);
	--mt-color-primary-deep: #1f3c5e;
	--mt-color-primary-bright: #3a69a3;
	--mt-color-primary-light: #6e96c2;
	--mt-color-primary-100: #e8eff6;
	--mt-color-primary-tint: #f1f5fa;
	--mt-color-primary-rgb: 44, 82, 130;

	/* Shared glyph colour for masked/inline SVG icons — a lighter primary so
	   icons read softer than primary text/links. Change here to retint sitewide. */
	--mt-color-icon: var(--mt-color-primary-bright);

	/* Secondary accent: teal. */
	--mt-color-accent: #2c7a7b;
	--mt-color-accent-bright: #379492;
	--mt-color-accent-100: #e3f0ef;
	--mt-color-accent-rgb: 44, 122, 123;

	--mt-color-secondary: #ffffff;
	--mt-color-secondary-hover: rgba(44, 82, 130, 0.1);
	--mt-color-secondary-contrast: #0f1612;

	--mt-color-danger: #d7153a;
	--mt-color-danger-hover: #b1102f;
	--mt-color-danger-contrast: #ffffff;

	--mt-color-warning: #c89020;
	--mt-color-info: #4d7eaf;

	/* -- Neutrals -- */
	/* Ink scale, dark -> light: text > text-muted > text-soft > text-subtle */
	--mt-color-text: #0f1612;
	--mt-color-text-muted: #2c3530;
	--mt-color-text-soft: #5b6660;
	--mt-color-text-muted-soft: rgba(56, 70, 81, 0.1);
	--mt-color-text-subtle: #8a938d;
	--mt-color-surface: #ffffff;
	--mt-color-surface-muted: #f6f6f4;
	--mt-color-surface-dark: #0e1814;
	--mt-color-border: #e5e5e3;
	--mt-color-border-soft: #ededeb;
	--mt-color-border-strong: rgba(16, 42, 56, 0.18);
	--mt-color-focus: #3b82d6;

	/* -- Category tag palette -- */
	--mt-color-tag-natjecaj:        #a05514;
	--mt-color-tag-natjecaj-bg:     #faecd5;
	--mt-color-tag-poziv:           #a5364a;
	--mt-color-tag-poziv-bg:        #f7dfe0;
	--mt-color-tag-odluka:          #8a6a14;
	--mt-color-tag-odluka-bg:       #f5e9bf;
	--mt-color-tag-savjetovanje:    #5d3e8c;
	--mt-color-tag-savjetovanje-bg: #ebe2f4;
	--mt-color-tag-obavijest:       var(--mt-color-primary-bright);
	--mt-color-tag-obavijest-bg:    var(--mt-color-primary-100);

	/* -- Overlay / scrim -- */
	--mt-color-overlay: rgba(0, 0, 0, 0.55);

	/* -- Spacing scale -- */
	--mt-space-xs: 0.25rem;
	--mt-space-sm: 0.5rem;
	--mt-space-md: 1rem;
	--mt-space-lg: 1.5rem;
	--mt-space-xl: 2rem;
	--mt-space-2xl: 3rem;
	--mt-space-3xl: 4rem;
	--mt-space-4xl: 5.5rem;

	/* -- Section frame -- */
	/* Contained page width — the single width EVERY page's content uses (homepage,
	   content pages, archives, hubs, contact, …) so the whole site lines up. The
	   per-container `min(100% - gutter, …)` keeps a margin off the screen edges.
	   The header/footer chrome is wider (see --mt-home-max-width). */
	--mt-section-max-width: 1260px;
	--mt-section-gutter: 2.5rem;
	/* Chrome (header nav, contact bar, footer) width — the SAME width as the page
	   content (1260px, 2rem gutter) so the header, footer and content all line up
	   at one width on every page. */
	--mt-home-max-width: 1260px;
	--mt-chrome-gutter: 2rem;
	/* Legacy aliases — migrating consumers off these */
	--section-max-width: var(--mt-section-max-width);
	--section-gutter: var(--mt-section-gutter);

	/* -- Typography -- */
	/* Public Sans (USWDS-designed for government sites) is the single   */
	/* font used across the whole site — body, UI, headlines, brand,     */
	/* eyebrows, meta and numerals. The --mt-font-serif and --mt-font-   */
	/* mono slots are kept in the contract but alias sans, so a child    */
	/* theme can repoint them at a serif / monospace for a multi-font    */
	/* system without touching component CSS.                            */
	--mt-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mt-font-serif: var(--mt-font-sans);
	--mt-font-mono: var(--mt-font-sans);
	/* --mt-font-brand kept for backward-compat; aliases sans by default */
	--mt-font-brand: var(--mt-font-sans);

	--mt-font-size-2xs: 0.6875rem;
	--mt-font-size-xs: 0.75rem;
	--mt-font-size-sm: 0.875rem;
	--mt-font-size-body: 0.9375rem;
	--mt-font-size-md: 1rem;
	--mt-font-size-intro: 1.0625rem;
	--mt-font-size-lg: 1.125rem;
	--mt-font-size-xl: 1.25rem;
	--mt-font-size-2xl: 1.5rem;
	--mt-font-size-3xl: 1.875rem;
	--mt-font-size-4xl: 2.25rem;
	--mt-font-size-5xl: 3rem;

	/* Heading scale (fluid) */
	--mt-heading-size-1: clamp(2.25rem, 4vw, 3rem);
	--mt-heading-size-2: clamp(1.75rem, 2.5vw, 2rem);
	--mt-heading-size-3: clamp(1.375rem, 2vw, 1.5rem);
	--mt-heading-size-4: clamp(1.125rem, 1.5vw, 1.25rem);
	--mt-heading-size-5: var(--mt-font-size-md);
	--mt-heading-size-6: var(--mt-font-size-sm);

	/* Display heading (hero) — fluid 36px mobile → 72px desktop */
	--mt-heading-display-1: clamp(2.25rem, 5.5vw, 4.5rem);
	--mt-heading-letter-spacing: -0.02em;

	/* Legacy --mt-type-* aliases */
	/* Used by per-component CSS (cards, hero content, section heads). */
	--mt-type-small: 0.875rem;
	--mt-type-body: 1rem;
	--mt-type-intro: clamp(1.125rem, 1.3vw, 1.25rem);
	--mt-type-h1: var(--mt-heading-size-1);
	--mt-type-h2: var(--mt-heading-size-2);
	--mt-type-h3: var(--mt-heading-size-3);
	--mt-type-h4: var(--mt-heading-size-4);

	/* Eyebrow / overline */
	--mt-eyebrow-size: var(--mt-font-size-2xs);
	--mt-eyebrow-letter-spacing: 0.08em;
	--mt-eyebrow-letter-spacing-wide: 0.14em;

	--mt-font-weight-regular: 400;
	--mt-font-weight-medium: 500;
	--mt-font-weight-bold: 700;

	--mt-line-height-tight: 1.2;
	--mt-line-height-base: 1.5;
	--mt-line-height-relaxed: 1.7;
	--mt-line-height-display: 1.05;

	/* -- Radii -- */
	--mt-radius-sm: 4px;
	--mt-radius-md: 8px;
	--mt-radius-lg: 12px;
	--mt-radius-xl: 18px;
	--mt-radius-card: 14px;
	--mt-radius-input: 10px;
	--mt-radius-pill: 999px;
	--mt-radius-circle: 50%;

	/* -- Aspect ratios -- */
	--mt-aspect-square: 1 / 1;
	--mt-aspect-landscape: 16 / 10;
	--mt-aspect-video: 16 / 9;

	/* -- Motion -- */
	--mt-motion-fast: 160ms ease;
	--mt-motion-base: 200ms ease;
	--mt-motion-slow: 300ms ease;

	/* -- Shadows -- */
	--mt-shadow-none: none;
	--mt-shadow-sm: 0 1px 0 rgba(15, 22, 18, 0.04), 0 1px 2px rgba(15, 22, 18, 0.04);
	--mt-shadow-md: 0 4px 8px rgba(15, 22, 18, 0.12);
	--mt-shadow-lg: 0 12px 24px rgba(15, 22, 18, 0.18);
	--mt-shadow-elevated: 0 1px 0 rgba(15, 22, 18, 0.04), 0 8px 24px -8px rgba(15, 22, 18, 0.10);
	--mt-shadow-overlay: 0 14px 40px -10px rgba(15, 22, 18, 0.25);

	/* -- Focus ring -- */
	--mt-focus-ring-width: 3px;
	--mt-focus-ring-offset: 2px;
	--mt-focus-ring-color: var(--mt-color-focus);

	/* -- Legacy palette aliases -- */
	/* Consumed throughout the per-component CSS. Values mirror the */
	/* canonical --mt-color-* tokens above. Migrate consumers to */
	/* canonical names incrementally, then drop these. */
	--mt-ink: var(--mt-color-text);
	--mt-ink-soft: var(--mt-color-text-muted);
	--mt-paper: var(--mt-color-surface);
	--mt-surface: var(--mt-color-surface-muted);
	--mt-line: var(--mt-color-border);
	--mt-red: var(--mt-color-danger);
	--mt-yellow: #f7c948;
	--mt-teal: #00756f;
	--mt-page-background: var(--mt-paper);

	/* -- Home-page-context tokens -- */
	/* Scoped here for now; could move to a page-context block later. */
	--mt-home-content-width: var(--section-max-width);
	--mt-home-section-title: clamp(2.25rem, 3vw, 3rem);
	--mt-home-section-title-mobile: clamp(2rem, 9vw, 2.5rem);
	--mt-home-section-rule-width: 3rem;
	--mt-home-section-rule-height: 0.25rem;
}