/* Seznamka.eu design tokens, variant I ("Praha"). */
:root {
	/* Fonts */
	--font-display: 'Baloo 2', system-ui, 'Segoe UI', sans-serif;  /* headings, logo, buttons */
	--font-body: 'Quicksand', system-ui, 'Segoe UI', sans-serif;   /* text, UI */
	--font-hand: 'Caveat', cursive;                                 /* hand-written notes */

	/* Surfaces */
	--page-bg: #F4F9FB;
	--surface-card: #FFFFFF;
	--cream-50: #FBFDFE;
	--cream-100: #F4F9FB;
	--cream-200: #E6F3F7;      /* switch rails, grey bubbles */
	--cream-300: #D3EDF3;      /* speed dating card */
	--section-blue: #E6F1F8;   /* "Nově přidané" band */

	/* Header */
	--header-bg: #E4F3F9;
	--header-border: #BBDFE8;
	--header-fg: #2A4C72;
	--header-accent: #1F6E9C;
	--nav-fg: #3F5570;
	--nav-active-fg: #185A80;
	--nav-hover: #1F6E9C;
	--nav-active-bg: rgba(255, 255, 255, 0.7);

	/* Ink */
	--ink-950: #23405F;        /* footer */
	--ink-900: #2A4C72;        /* headings */
	--ink-700: #3F5570;
	--ink-500: #5E7185;
	--ink-400: #93A3B5;
	--ink-300: #BFCBD8;
	--ink-50: #EDF3F8;         /* interest chips */

	/* Text */
	--text-primary: #2C3E5C;
	--text-secondary: #46586F;
	--text-muted: #5E7185;
	--text-link: #185A80;

	/* Blue (secondary) */
	--secondary: #1F6E9C;
	--secondary-hover: #185A80;
	--accent: #7FB3D5;
	--hand-ink: #194C91;
	--hand-heart: #3478CF;

	/* Rose (primary actions, hearts) */
	--brand: #D62D55;
	--brand-hover: #B8234A;
	--brand-active: #9A1C3D;
	--brand-soft: #FDE4EA;
	--rose-50: #FEF1F4;
	--rose-100: #FDE4EA;
	--rose-200: #F5B3C3;
	--rose-300: #EF8AA2;
	--like: #E8456B;

	/* Green is used ONLY for online state and check marks */
	--online: #16A34A;
	--online-soft: #DCFCE7;
	--online-text: #15803D;

	/* Lines */
	--border-subtle: #E1EDF3;
	--border-default: #CFE0E9;
	--border-strong: #A9C2D0;

	/* Radius */
	--radius-md: 14px;    /* inputs, icon buttons */
	--radius-lg: 20px;    /* card photos, list items */
	--radius-xl: 28px;    /* ad cards, bands */
	--radius-2xl: 36px;   /* search panel, big cards */
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 6px rgba(19, 19, 22, 0.08);
	--shadow-md: 0 6px 18px rgba(19, 19, 22, 0.10);
	--shadow-brand: 0 4px 12px rgba(214, 45, 85, 0.24);
	--ring: rgba(31, 110, 156, 0.28);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 140ms;
	--dur-base: 240ms;

	/* Layout */
	--container: 1200px;
	--gutter: 32px;
}

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