/* ManDeo design tokens — pulled from the "ManDeo Design System" Claude Design project
   (tokens/colors.css, typography.css, space.css, motion.css, base.css). Do not hand-edit
   values here without updating the source project; re-run the pull instead. */

:root {
	/* ---- Colour — ink cool graphite (OKLCH hue 250), paper warm (hue 80) ---- */
	--ink-900: #0C151D;
	--ink-800: #1C252E;
	--ink-700: #353E47;
	--ink-600: #515962;
	--ink-500: #737B84; /* large text / non-text only */
	--ink-400: #989FA7;
	--ink-300: #BFC5CB;
	--ink-200: #DADEE3;

	--paper-000: #FFFFFF;
	--paper-050: #F8F6F3;
	--paper-100: #EFECE8;

	--copper-600: #A94608;
	--copper-500: #D16022; /* large text / non-text only */
	--copper-400: #E7885D;
	--copper-300: #F0A585; /* reversed lockups only */
	--copper-100: #FFDFD0;

	--teal-600: #007984;
	--teal-500: #0099A6;
	--teal-100: #CEEFF3;

	--color-success: #21763C;
	--color-warning: #966800;
	--color-danger:  #C53732;

	/* Semantic aliases */
	--surface-page:     var(--paper-050);
	--surface-card:     var(--paper-000);
	--surface-sunken:   var(--paper-100);
	--surface-inverse:  var(--ink-900);
	--surface-disabled: var(--ink-300);

	--text-strong: var(--ink-900);
	--text-body:   var(--ink-700);
	--text-muted:  var(--ink-600);
	--text-subtle: var(--ink-500);
	--text-inverse: var(--paper-050);
	--text-on-ink-muted: var(--ink-300);
	--text-link:       var(--copper-600);
	--text-link-hover: var(--copper-500);

	--color-accent: var(--copper-600);
	--color-line:   var(--ink-200);
	--color-line-strong: var(--ink-300);
	--scrim-ink: rgba(12, 21, 29, 0.55);

	/* ---- Typography — Literata (display), Archivo (UI/body), JetBrains Mono (labels) ---- */
	--font-display: 'Literata', Georgia, 'Times New Roman', serif;
	--font-ui:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
	--font-body: var(--font-ui); /* alias used by older markup */

	--weight-display: 400; /* 40px and above */
	--weight-heading: 500; /* 26-39px */
	--weight-subhead: 600; /* below 26px */

	--text-display-xl: 76px; --lh-display-xl: 1.12; --ls-display-xl: -0.030em;
	--text-display-l:  52px; --lh-display-l:  1.12; --ls-display-l:  -0.025em;
	--text-heading-m:  30px; --lh-heading-m:  1.25; --ls-heading-m:  -0.015em;
	--text-heading-s:  20px; --lh-heading-s:  1.35; --ls-heading-s:  -0.010em;
	--text-body-l: 18px; --lh-body-l: 1.60;
	--text-body-m: 16px; --lh-body-m: 1.65;
	--text-body-s: 14px; --lh-body-s: 1.55;
	--text-label: 11px;  --lh-label: 1.45; --ls-label: 0.14em;

	/* ---- Space — 4px base ---- */
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-6: 24px; --space-8: 32px; --space-12: 48px;
	--space-20: 80px;
	--space-32: 128px;

	--section-y-mobile:  var(--space-20);
	--section-y-desktop: var(--space-32);

	/* Radius — near-square. Softness comes from paper and type, not radius. */
	--radius-0: 0;         /* sections, images */
	--radius-1: 2px;       /* buttons, inputs, chips */
	--radius-2: 4px;       /* cards, popovers */
	--radius-full: 999px;  /* avatars and toggles only */

	/* Elevation — hairline first, shadow rarely */
	--elev-0: 1px solid var(--ink-200);
	--elev-1: 0 1px 2px rgba(12,21,29,.06), 0 4px 12px rgba(12,21,29,.05);
	--elev-2: 0 2px 4px rgba(12,21,29,.06), 0 16px 40px rgba(12,21,29,.12);
	--elev-modal: 0 24px 60px rgba(12,21,29,0.25);

	/* Layout */
	--page-max: 1248px; /* matches .wrap in the canonical boards (SiteNav/SiteFooter/homepage.dc.html) */
	--gutter-desktop: 24px; --margin-desktop: 96px; /* 12 col, >=1280 */
	--gutter-tablet: 20px;  --margin-tablet: 40px;  /*  8 col, 768-1279 */
	--gutter-mobile: 16px;  --margin-mobile: 20px;  /*  4 col, <768 */

	/* Controls */
	--control-height: 46px;
	--control-height-lg: 54px;
	--control-height-sm: 38px;
	--header-height: 72px;
	--focus-ring: 2px solid var(--copper-600);
	--focus-offset: 2px;

	/* ---- Motion — one curve everywhere ---- */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur-instant: 80ms;
	--dur-quick: 160ms;
	--dur-considered: 240ms;
	--dur-deliberate: 400ms;
	/* aliases used by older markup */
	--duration-fast: var(--dur-instant);
	--duration-base: var(--dur-quick);
	--duration-slow: var(--dur-considered);
	--duration-xslow: var(--dur-deliberate);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-instant: 0ms; --dur-quick: 0ms; --dur-considered: 0ms; --dur-deliberate: 0ms;
	}
}

/* ---- Base element defaults ---- */
html { font-size: 16px; }
body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-strong);
	font: 400 var(--text-body-m)/var(--lh-body-m) var(--font-ui);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--text-strong);
	margin: 0;
	line-height: 1.15;
}

/* Radius: near-square. */
input, textarea, select, button, .mandeo-btn { border-radius: var(--radius-1); }
.mandeo-avatar { border-radius: var(--radius-full); }
.mandeo-card { border-radius: var(--radius-2); }
img { border-radius: var(--radius-0); }

.mandeo-container {
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--margin-desktop);
	box-sizing: border-box;
}
@media (max-width: 1279px) {
	.mandeo-container { padding: 0 var(--margin-tablet); }
}
@media (max-width: 767px) {
	.mandeo-container { padding: 0 var(--margin-mobile); }
}

.mandeo-label {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}