/* ==========================================================================
   MOP design tokens
   --------------------------------------------------------------------------
   CHANGE THE BRAND COLOUR HERE (or in Appearance → Customize → MOP Brand):
     --mop-primary  — the one brand colour. Buttons, links, badges, tints,
                      borders and the dark band are all derived from it.
     --mop-dark     — the deep band / footer colour. Derived from
                      --mop-primary by default; set a hex to pin it.
   Neutrals (ink, muted, paper) are fixed so text contrast never changes.
   ========================================================================== */

:root {
	/* ---- Brand (edit these) -------------------------------------------- */
	--mop-primary: #376B79;

	/* ---- Derived brand shades (fallback: color-mix in oklch) ------------ */
	--mop-primary-hover: color-mix(in oklch, var(--mop-primary), #000 20%);
	--mop-primary-tint: color-mix(in oklch, var(--mop-primary) 11%, #fff);     /* mist  #EAF1F2 */
	--mop-primary-soft: color-mix(in oklch, var(--mop-primary) 5%, #fff);      /* #F3F8F8 */
	--mop-primary-well: color-mix(in oklch, var(--mop-primary) 6%, #fff);      /* hero well #F1F5F5 */
	--mop-primary-light: color-mix(in oklch, var(--mop-primary) 55%, #fff);    /* small stars #8FB3BB */
	--mop-border: color-mix(in oklch, var(--mop-primary) 18%, #fff);           /* #D6E2E4 */
	--mop-line: color-mix(in oklch, var(--mop-primary) 12%, #fff);             /* #E1E8EA */
	--mop-dark: color-mix(in oklch, var(--mop-primary), #000 45%);             /* night #13323A */

	/* ---- Derived from the dark band colour ------------------------------ */
	--mop-dark-card: color-mix(in oklch, var(--mop-dark), #fff 5%);            /* #183C45 */
	--mop-dark-line: color-mix(in oklch, var(--mop-dark), #fff 12%);           /* #2B5761 */
	--mop-on-dark: color-mix(in oklch, var(--mop-dark), #fff 74%);             /* #B9CFD3 */
	--mop-on-dark-strong: color-mix(in oklch, var(--mop-dark), #fff 90%);      /* #E6EFF0 */
	--mop-on-dark-label: color-mix(in oklch, var(--mop-dark), #fff 66%);       /* #9FC0C7 */
	--mop-on-dark-faint: color-mix(in oklch, var(--mop-dark), #fff 58%);       /* #8FB0B7 */
	--mop-on-dark-icon: color-mix(in oklch, var(--mop-dark), #fff 70%);        /* #A9D0D7 */

	/* ---- Neutrals ------------------------------------------------------- */
	--mop-ink: #14242A;
	--mop-ink-soft: #26363C;
	--mop-body: #4C5D63;
	--mop-muted: #5C6C72;
	--mop-subtle: #6A7A80;
	--mop-faint: #7A8A90;
	--mop-sep: #B5C3C7;
	--mop-bg: #F6F8F8;          /* paper */
	--mop-surface: #FFFFFF;
	--mop-image-well: #EFF2F2;
	--mop-control-border: #CBD9DC;
	--mop-on-primary: #FFFFFF;

	/* ---- Status --------------------------------------------------------- */
	--mop-success: #2F6F4F;
	--mop-success-bg: #EAF4EE;
	--mop-error: #A23B32;
	--mop-error-bg: #FBEDEB;
	--mop-warning: #8A5A12;
	--mop-warning-bg: #FBF3E4;

	/* ---- Typography ----------------------------------------------------- */
	--mop-font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
	--mop-font-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
	--mop-font-label: 'Saira Condensed', 'Arial Narrow', sans-serif;

	/* ---- Radii ---------------------------------------------------------- */
	--mop-radius-sm: 8px;
	--mop-radius-btn: 10px;
	--mop-radius-card: 14px;
	--mop-radius-lg: 18px;
	--mop-radius-xl: 24px;
	--mop-radius-pill: 999px;

	/* ---- Layout --------------------------------------------------------- */
	--mop-container: 1200px;
	--mop-gutter: clamp(16px, 4vw, 40px);
	--mop-section-y: clamp(56px, 7.2vw, 104px);
	--mop-header-h: 88px;

	/* ---- Effects -------------------------------------------------------- */
	--mop-shadow-sm: 0 1px 2px rgba(20, 36, 42, 0.06);
	--mop-shadow-md: 0 10px 30px -12px rgba(20, 36, 42, 0.22);
	--mop-shadow-lg: 0 24px 60px -20px rgba(20, 36, 42, 0.35);
	--mop-focus: 0 0 0 3px var(--mop-surface), 0 0 0 5px var(--mop-primary);
	--mop-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Precise derivations where relative colour syntax is supported: keeps the
   approved palette exact for the default teal and scales for any other hue. */
@supports (color: oklch(from red l c h)) {
	:root {
		--mop-primary-hover: oklch(from var(--mop-primary) calc(l - 0.092) calc(c * 0.9) h);
		--mop-primary-tint: oklch(from var(--mop-primary) 0.953 calc(c * 0.14) h);
		--mop-primary-soft: oklch(from var(--mop-primary) 0.975 calc(c * 0.1) h);
		--mop-primary-well: oklch(from var(--mop-primary) 0.967 calc(c * 0.08) h);
		--mop-primary-light: oklch(from var(--mop-primary) 0.743 calc(c * 0.68) h);
		--mop-border: oklch(from var(--mop-primary) 0.904 calc(c * 0.22) h);
		--mop-line: oklch(from var(--mop-primary) 0.926 calc(c * 0.13) h);
		--mop-dark: oklch(from var(--mop-primary) 0.2975 calc(c * 0.655) h);

		--mop-dark-card: oklch(from var(--mop-dark) calc(l + 0.036) calc(c * 1.12) h);
		--mop-dark-line: oklch(from var(--mop-dark) calc(l + 0.125) calc(c * 1.3) h);
		--mop-on-dark: oklch(from var(--mop-dark) 0.839 calc(c * 0.62) h);
		--mop-on-dark-strong: oklch(from var(--mop-dark) 0.945 calc(c * 0.3) h);
		--mop-on-dark-label: oklch(from var(--mop-dark) 0.786 calc(c * 0.94) h);
		--mop-on-dark-faint: oklch(from var(--mop-dark) 0.735 calc(c * 0.95) h);
		--mop-on-dark-icon: oklch(from var(--mop-dark) 0.832 calc(c * 1.08) h);
	}
}