/* Design tokens – Institut du Sein de Tanger. Source of truth: design/design-spec.md */
:root {
	/* Palette */
	--c-white: #ffffff;        /* main navigation, cards */
	--c-bg: #fcf9f6;           /* ivory – page background */
	--c-bg-rgb: 252, 249, 246; /* ivory as RGB channels, for rgba() overlays */
	--c-blush: #f8e8ee;        /* pale pink – top bar, hover backgrounds */
	--c-blush-rgb: 248, 232, 238;
	--c-text: #2b1a24;         /* plum anthracite – text & links */
	--c-text-rgb: 43, 26, 36;  /* for tone-on-tone overlays (watermark) */
	--c-violet: #61207c;       /* icons, active link, accents, focus */
	--c-violet-rgb: 97, 32, 124;
	--c-violet-deep: #3f1454;  /* dark top bar (derived from --c-violet) */
	--c-violet-deep-rgb: 63, 20, 84;
	--c-white-rgb: 255, 255, 255;
	--c-on-dark: #ffffff;      /* text & icons on --c-violet-deep */
	--c-line-on-dark: rgba(255, 255, 255, 0.28); /* separators on dark */
	--c-primary: #c70059;      /* raspberry – detail accent */
	--c-primary-rgb: 199, 0, 89;
	--c-primary-dark: #aa004c; /* primary hover */
	--c-on-primary: #ffffff;
	--c-surface: var(--c-white);
	--c-muted: #6b5a64;
	--c-border: #eee3e8;
	--c-accent: var(--c-violet);

	/* Shadows (plum-tinted) */
	--shadow-sm: 0 2px 14px rgba(43, 26, 36, 0.05);
	--shadow-md: 0 14px 34px rgba(43, 26, 36, 0.12);

	/* Fonts */
	--f-heading: "Google Sans", Arial, sans-serif;
	--f-body: "Google Sans", Arial, sans-serif;

	/* Font sizes */
	--fs-xs: 0.8125rem;  /* 13px */
	--fs-sm: 0.875rem;   /* 14px */
	--fs-md: 0.9375rem;  /* 15px */
	--fs-base: 1rem;     /* 16px */
	--fs-lg: 1.125rem;
	--fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--fs-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
	--fs-h1: 2rem;       /* page titles (home hero + page header): 32 → 34 → 42 → 46px */
	--fs-h2: 1.75rem;    /* section titles: 28 → 36 → 40px (see media queries below) */

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* Motion (one system for the whole site – see sections.css "Motion system") */
	--motion-ease: cubic-bezier(.2, .7, .2, 1);
	--motion-dur: .7s;      /* reveal: fade + rise */
	--motion-y: 20px;       /* reveal: rise distance */
	--motion-hover: .3s;    /* hover / state changes */
	--motion-draw: 1.1s;    /* icon line drawing */

	/* Shape & layout */
	--radius: 12px;
	--radius-sm: 8px;
	--container: 1280px;
	--gutter: 16px;
}
@media (min-width: 480px) { :root { --gutter: 20px; --fs-h1: 2.125rem; } }
@media (min-width: 768px) { :root { --gutter: 24px; --fs-h1: 2.625rem; --fs-h2: 2.25rem; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --fs-h2: 2.5rem; } }
@media (min-width: 1280px) { :root { --fs-h1: 2.875rem; } }