/**
 * Harvest Companion — Base Styles
 * ===============================
 * Applies the design tokens to plain HTML elements so any surface built
 * inside a `.hclms` wrapper inherits the design system for free.
 *
 * SCOPING NOTE: every rule is scoped under `.hclms`. Unscoped element
 * selectors would restyle the whole of wp-admin and every tenant theme —
 * exactly what a multi-tenant platform must never do. To opt a surface
 * into the design system, wrap it in `class="hclms"` (admin surfaces use
 * `class="hclms hclms-admin"`).
 */

.hclms {
	font-family: var(--hc-font-body);
	color: var(--hc-text-primary);
	line-height: var(--hc-leading-body);
}

/* ------------------------------------------------------- headings ---- */
.hclms h1,
.hclms h2,
.hclms h3,
.hclms h4,
.hclms h5,
.hclms h6 {
	font-family: var(--hc-font-heading);
	font-weight: 500;
	letter-spacing: var(--hc-heading-spacing);
	line-height: var(--hc-leading-tight);
	color: var(--hc-text-primary);
	margin: 0 0 var(--hc-space-3);
}
.hclms h1 { font-size: var(--hc-text-3xl); }
.hclms h2 { font-size: var(--hc-text-2xl); }
.hclms h3 { font-size: var(--hc-text-xl); }
.hclms h4 { font-size: var(--hc-text-lg); }
.hclms h5,
.hclms h6 { font-size: var(--hc-text-base); }

/* Small-caps meta label — the wireframes' signature detail. */
.hclms .hc-label {
	font-size: var(--hc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--hc-label-spacing);
	color: var(--hc-text-tertiary);
}

/* ----------------------------------------------------- body text ----- */
.hclms p {
	margin: 0 0 var(--hc-space-4);
}
.hclms small {
	font-size: var(--hc-text-sm);
	color: var(--hc-text-secondary);
}
.hclms hr {
	border: 0;
	border-top: 1px solid var(--hc-border);
	margin: var(--hc-space-6) 0;
}

/* --------------------------------------------------------- links ----- */
.hclms a {
	color: var(--hc-accent-deep);
	text-decoration: underline;
	text-decoration-color: var(--hc-border-strong);
	text-underline-offset: 2px;
	transition: var(--hc-transition);
}
.hclms a:hover {
	color: var(--hc-accent-hover);
	text-decoration-color: var(--hc-accent-hover);
}

/* ------------------------------------------------------- buttons ----- */
/* Default button: quiet card-surface button (wireframes' .btn). */
.hclms button,
.hclms .hclms-btn,
.hclms input[type='submit'],
.hclms input[type='button'] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--hc-border-strong);
	border-radius: var(--hc-radius-md);
	background: var(--hc-bg-card);
	color: var(--hc-text-primary);
	font-family: var(--hc-font-body);
	font-size: var(--hc-text-sm);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: var(--hc-transition);
}
.hclms button:hover,
.hclms .hclms-btn:hover,
.hclms input[type='submit']:hover,
.hclms input[type='button']:hover {
	border-color: var(--hc-accent);
	color: var(--hc-accent-deep);
	background: var(--hc-accent-subtle);
	text-decoration: none;
}

/* Primary action: filled terracotta. */
.hclms .hclms-btn-primary,
.hclms button.button-primary {
	background: var(--hc-accent);
	border-color: var(--hc-accent);
	color: #fff;
}
.hclms .hclms-btn-primary:hover,
.hclms button.button-primary:hover {
	background: var(--hc-accent-hover);
	border-color: var(--hc-accent-hover);
	color: #fff;
}

.hclms button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* --------------------------------------------------------- forms ----- */
.hclms input[type='text'],
.hclms input[type='email'],
.hclms input[type='url'],
.hclms input[type='number'],
.hclms input[type='password'],
.hclms select,
.hclms textarea {
	font-family: var(--hc-font-body);
	font-size: var(--hc-text-sm);
	color: var(--hc-text-primary);
	background: var(--hc-bg-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-md);
	padding: 8px 12px;
	transition: var(--hc-transition);
}
.hclms input:focus,
.hclms select:focus,
.hclms textarea:focus {
	outline: none;
	border-color: var(--hc-accent);
	box-shadow: 0 0 0 3px var(--hc-accent-subtle);
}
.hclms label {
	font-size: var(--hc-text-sm);
	font-weight: 600;
	color: var(--hc-text-secondary);
}

/* -------------------------------------------------------- tables ----- */
.hclms table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hc-text-sm);
}
.hclms th {
	text-align: left;
	font-size: var(--hc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--hc-label-spacing);
	color: var(--hc-text-tertiary);
	padding: var(--hc-space-2) var(--hc-space-3);
	border-bottom: 1px solid var(--hc-border-strong);
}
.hclms td {
	padding: var(--hc-space-2) var(--hc-space-3);
	border-bottom: 1px solid var(--hc-border);
}

/* -------------------------------------------------- status washes ---- */
.hclms .hc-wash-success { background: var(--hc-success-subtle); color: var(--hc-success); }
.hclms .hc-wash-warning { background: var(--hc-warning-subtle); color: var(--hc-warning); }
.hclms .hc-wash-info    { background: var(--hc-info-subtle);    color: var(--hc-info); }
.hclms .hc-wash-danger  { background: var(--hc-danger-subtle);  color: var(--hc-danger); }