/**
 * CaseSteward Design System
 * -------------------------
 * The single source of brand truth. Every front-end dashboard/directory and
 * every custom wp-admin screen reuses these custom properties and classes
 * instead of inventing new colors or button shapes.
 *
 * Captured from the reference portal's main dashboard: diagonal two-tone banner,
 * bold two-color all-caps headlines, and solid-color "flag" action buttons
 * (asymmetric 18px-0 rounding), one consistent color per category.
 *
 * Version: 0.1.0
 */

:root {
	/* Brand palette (one solid color per primary action/category). */
	--csw-teal:   #408292;
	--csw-plum:   #873A68;
	--csw-coral:  #ED6967;
	--csw-olive:  #B9B34C;
	--csw-blue:   #212AAF;
	--csw-red:    #A04343;
	--csw-green:  #49AA5B;
	--csw-purple: #482575;

	/* Neutrals / structural. */
	--csw-navy:        #1a2148; /* headline primary text */
	--csw-ink:         #23282d; /* body copy */
	--csw-muted:       #6b7280;
	--csw-line:        #e4e6eb;
	--csw-surface:     #ffffff;
	--csw-surface-alt: #f6f7f9;
	--csw-footer:      #4b4f56;
	--csw-btn-text:    #fdfdfd; /* near-white button label */

	/* Category → color assignments (pattern, not law — later sessions can
	   remap, but they pull from these tokens rather than raw hex). */
	--csw-cat-referrals:     var(--csw-teal);
	--csw-cat-case-notes:    var(--csw-plum);
	--csw-cat-training:      var(--csw-coral);
	--csw-cat-billing:       var(--csw-olive);
	--csw-cat-add-staff:     var(--csw-blue);
	--csw-cat-add-consumer:  var(--csw-red);
	--csw-cat-add-referral:  var(--csw-green);
	--csw-cat-owner:         var(--csw-purple);

	/* Typography. */
	--csw-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--csw-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Shape. The signature asymmetric "flag" radius: rounded top-left and
	   bottom-right, square on the other corners. */
	--csw-btn-radius: 18px 0 18px 0;
	--csw-card-radius: 6px;
	--csw-btn-pad: 18px 40px;

	/* Front-end screen width. These are dashboards, not articles — they want the
	   container, not a reading measure. Override in a child theme to narrow them,
	   e.g. --csw-screen-max: 1400px. */
	--csw-screen-max: 100%;

	/* Narrow width for standalone gate/notice cards (signed-out, unlinked,
	   staff-only), which ARE just a sentence and should stay readable. */
	--csw-notice-max: 640px;
}

/* ---------- Front-end screen shell ---------- */

/*
 * Every top-level front-end screen claims the full width of whatever container
 * it lands in.
 *
 * !important is deliberate here, and it is the only place this file uses it for
 * layout. Block themes wrap post content in `.is-layout-constrained`, whose rule
 * clamps direct children to the theme's own `content-size` — 645px on Twenty
 * Twenty-Five. That rule is authored with `:where()`, so it carries the same
 * (0,1,0) specificity as a plain `.csw-dashboard` selector and wins or loses on
 * source order alone, which the plugin does not control. Rather than ship a
 * layout that silently squeezes to half width on a majority of block themes, the
 * screens assert their own width and expose --csw-screen-max as the knob.
 */
.csw-dashboard,
.csw-directory,
.csw-timecard {
	width: 100% !important;
	max-width: var(--csw-screen-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Gate/notice cards opt back out — they are one paragraph, not a dashboard. */
.csw-dashboard--notice,
.csw-directory--notice,
.csw-timecard--notice {
	max-width: var(--csw-notice-max) !important;
}

/* ---------- Headline: bold, all-caps, two-color ---------- */
.csw-headline {
	font-family: var(--csw-font-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--csw-navy);
	line-height: 1.1;
	letter-spacing: 0.01em;
	margin: 0 0 0.4em;
}

/* The emphasized word(s) in coral — use <em> or .csw-accent inside .csw-headline,
   e.g. WELCOME <em>Name</em> / YOUR <span class="csw-accent">MAIN DASHBOARD</span>. */
.csw-headline em,
.csw-headline .csw-accent {
	font-style: normal;
	color: var(--csw-coral);
}

.csw-lead {
	color: var(--csw-muted);
	font-size: 15px;
	max-width: 70ch;
}

/* Bold uppercase section header for white content sections
   ("DVR CLIENTS," "RECENT REFERRALS"). */
.csw-section-header {
	font-family: var(--csw-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--csw-navy);
	border-bottom: 3px solid var(--csw-line);
	padding-bottom: 8px;
	margin: 0 0 16px;
}

/* ---------- Action buttons: solid "flag" blocks ---------- */
.csw-btn {
	display: inline-block;
	font-family: var(--csw-font-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--csw-btn-text);
	background-color: var(--csw-teal); /* default; use a modifier for category color */
	padding: var(--csw-btn-pad);
	border: 0;
	border-radius: var(--csw-btn-radius);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.csw-btn:hover,
.csw-btn:focus {
	filter: brightness(0.92);
	color: var(--csw-btn-text);
	transform: translateY(-1px);
}

.csw-btn:focus-visible {
	outline: 3px solid var(--csw-navy);
	outline-offset: 2px;
}

/* Color modifiers — one solid brand color per category. */
.csw-btn--teal   { background-color: var(--csw-teal); }
.csw-btn--plum   { background-color: var(--csw-plum); }
.csw-btn--coral  { background-color: var(--csw-coral); }
.csw-btn--olive  { background-color: var(--csw-olive); }
.csw-btn--blue   { background-color: var(--csw-blue); }
.csw-btn--red    { background-color: var(--csw-red); }
.csw-btn--green  { background-color: var(--csw-green); }
.csw-btn--purple { background-color: var(--csw-purple); }

/* ---------- Cards / content sections ---------- */
.csw-card {
	background: var(--csw-surface);
	border: 1px solid var(--csw-line);
	border-radius: var(--csw-card-radius);
	padding: 20px 24px;
}

/* ---------- Utility ---------- */
.csw-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;
}