/*
 * Skinova design tokens — shared by the public theme, patient portal and Clinic OS (v0.3).
 *
 * Direction: a calm, clinical app. Cool sage-tinted canvas, white surfaces, the logo's sage as
 * the brand voice, deep forest for primary actions and dark "hero" surfaces, and one warm skin
 * tone for highlights. One typeface (Manrope, variable) for everything.
 *
 * Text rules: body text uses --skn-ink or --skn-text-muted. --skn-sage-500 (the logo green) is
 * for marks, icons and large type. Buttons use --skn-color-primary (forest, 7.9:1 with white).
 */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	/* Brand — sage, from the logo (#6E8559) */
	--skn-sage-50: #f1f5ed;
	--skn-sage-100: #e3ebdb;
	--skn-sage-200: #cbdabd;
	--skn-sage-300: #a9bf94;
	--skn-sage-500: #6e8559;
	--skn-sage-600: #587045;
	--skn-sage-700: #3f5a31;
	--skn-sage-800: #2d4223;
	--skn-sage-900: #1b2a1c;

	/* Neutrals — cool, slightly green (legacy "cream" names kept for compatibility) */
	--skn-cream-50: #f4f6f2;
	--skn-cream-100: #eef1ea;
	--skn-cream-200: #e5e9e0;
	--skn-cream-300: #dde3d8;
	--skn-stone-400: #b9c2b4;

	/* Warm accent — a skin tone, for highlights and charts. clay-700 carries text. */
	--skn-clay-100: #fbeee4;
	--skn-clay-300: #f1caa9;
	--skn-clay-500: #d99a6c;
	--skn-clay-700: #95542e;

	/* Text */
	--skn-ink: #17201a;
	--skn-text-muted: #5b675d;
	--skn-text-soft: #8a958b;
	--skn-text-on-brand: #ffffff;

	/* Semantic */
	--skn-success: #22704a;
	--skn-success-bg: #e2f3e9;
	--skn-warning: #8a5a07;
	--skn-warning-bg: #fbf0d6;
	--skn-error: #b13a2c;
	--skn-error-bg: #fbe5e1;
	--skn-info: #275b7d;
	--skn-info-bg: #e3eef6;

	/* Roles */
	--skn-color-primary: var(--skn-sage-700);
	--skn-color-primary-hover: var(--skn-sage-800);
	--skn-color-secondary: var(--skn-sage-100);
	--skn-color-accent: var(--skn-clay-500);
	--skn-bg: var(--skn-cream-50);
	--skn-bg-alt: var(--skn-cream-100);
	--skn-surface: #ffffff;
	--skn-surface-dark: var(--skn-sage-900);
	--skn-border: #e3e8df;
	--skn-border-strong: #c9d1c3;
	--skn-focus: #2f6fd1;

	/* Chart palette (validated for contrast against white; never colour alone — labels too) */
	--skn-chart-1: #3f5a31;
	--skn-chart-2: #8fae6f;
	--skn-chart-3: #d99a6c;
	--skn-chart-4: #7d93a8;
	--skn-chart-5: #c7cfc1;

	/* Typography */
	--skn-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--skn-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--skn-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--skn-text-xs: 0.75rem;
	--skn-text-sm: 0.875rem;
	--skn-text-base: 1rem;
	--skn-text-lg: 1.125rem;
	--skn-text-xl: 1.375rem;
	--skn-text-2xl: 1.75rem;
	--skn-text-3xl: 2.25rem;
	--skn-text-4xl: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	--skn-leading-tight: 1.12;
	--skn-leading-normal: 1.55;
	--skn-weight-regular: 400;
	--skn-weight-medium: 500;
	--skn-weight-semibold: 650;
	--skn-weight-display: 750;
	--skn-tracking-display: -0.025em;

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

	/* Shape — radius grows with the size and importance of the surface */
	--skn-radius-sm: 10px;
	--skn-radius-md: 14px;
	--skn-radius-lg: 20px;
	--skn-radius-xl: 28px;
	--skn-radius-pill: 999px;
	--skn-shadow-sm: 0 1px 2px rgba(23, 32, 26, 0.05);
	--skn-shadow-md: 0 1px 2px rgba(23, 32, 26, 0.04), 0 10px 30px -12px rgba(23, 32, 26, 0.14);
	--skn-shadow-lg: 0 2px 6px rgba(23, 32, 26, 0.06), 0 24px 56px -20px rgba(23, 32, 26, 0.28);

	/* Layout */
	--skn-container: 76rem;
	--skn-container-narrow: 44rem;
	--skn-touch-target: 44px;

	/* Motion */
	--skn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--skn-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	:root { --skn-duration: 0ms; }
}

/* ---------- Shared primitives ---------- */

.skn-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--skn-space-2);
	min-height: 48px;
	padding: 0 var(--skn-space-5);
	border: 1px solid transparent;
	border-radius: var(--skn-radius-pill);
	font: var(--skn-weight-semibold) var(--skn-text-base)/1 var(--skn-font-body);
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--skn-duration) var(--skn-ease), border-color var(--skn-duration) var(--skn-ease), color var(--skn-duration) var(--skn-ease), transform var(--skn-duration) var(--skn-ease);
	-webkit-tap-highlight-color: transparent;
}
.skn-btn:active:not([disabled]) { transform: scale(0.98); }
.skn-btn--primary { background: var(--skn-color-primary); color: var(--skn-text-on-brand); }
.skn-btn--primary:hover { background: var(--skn-color-primary-hover); }
.skn-btn--secondary { background: var(--skn-surface); color: var(--skn-ink); border-color: var(--skn-border-strong); }
.skn-btn--secondary:hover { background: var(--skn-sage-50); border-color: var(--skn-sage-300); }
.skn-btn--ghost { background: transparent; color: var(--skn-sage-700); }
.skn-btn--ghost:hover { background: var(--skn-sage-50); }
.skn-btn--dark { background: var(--skn-sage-900); color: #fff; }
.skn-btn--dark:hover { background: #000; }
.skn-btn--danger { background: var(--skn-error); color: #fff; }
.skn-btn[disabled], .skn-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.skn-btn:focus-visible,
.skn-input:focus-visible,
.skn-focusable:focus-visible {
	outline: 3px solid var(--skn-focus);
	outline-offset: 2px;
}

.skn-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: var(--skn-space-2) var(--skn-space-4);
	border: 1px solid var(--skn-border-strong);
	border-radius: var(--skn-radius-md);
	background: var(--skn-surface);
	color: var(--skn-ink);
	font: var(--skn-text-base)/var(--skn-leading-normal) var(--skn-font-body);
	transition: border-color var(--skn-duration) var(--skn-ease), box-shadow var(--skn-duration) var(--skn-ease);
}
.skn-input:hover { border-color: var(--skn-stone-400); }
.skn-input:focus { border-color: var(--skn-sage-600); box-shadow: 0 0 0 4px rgba(110, 133, 89, 0.18); outline: none; }
.skn-input[aria-invalid="true"] { border-color: var(--skn-error); }
textarea.skn-input { min-height: 96px; padding-top: var(--skn-space-3); }
select.skn-input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b675d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }

.skn-card {
	background: var(--skn-surface);
	border: 1px solid var(--skn-border);
	border-radius: var(--skn-radius-lg);
	box-shadow: var(--skn-shadow-sm);
	padding: var(--skn-space-5);
}

.skn-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--skn-radius-pill);
	font: var(--skn-weight-semibold) var(--skn-text-xs)/1.5 var(--skn-font-body);
	background: var(--skn-sage-100);
	color: var(--skn-sage-800);
	white-space: nowrap;
}
.skn-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.skn-badge--plain::before { display: none; }
.skn-badge--success { background: var(--skn-success-bg); color: var(--skn-success); }
.skn-badge--warning { background: var(--skn-warning-bg); color: var(--skn-warning); }
.skn-badge--error { background: var(--skn-error-bg); color: var(--skn-error); }
.skn-badge--info { background: var(--skn-info-bg); color: var(--skn-info); }

.skn-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--skn-sage-100); color: var(--skn-sage-800); font: 700 0.85rem/1 var(--skn-font-body); letter-spacing: 0.02em; overflow: hidden; }
.skn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.skn-avatar--sm { width: 32px; height: 32px; font-size: 0.72rem; }
.skn-avatar--lg { width: 52px; height: 52px; font-size: 1rem; }

.skn-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}