/* typography */
@font-face { font-family: 'Supervision Sans'; src: url('../fonts/SupervisionSans-Regular.woff2') format('woff2'), url('../fonts/SupervisionSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supervision Sans'; src: url('../fonts/SupervisionSans-Medium.woff2') format('woff2'), url('../fonts/SupervisionSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supervision Sans'; src: url('../fonts/SupervisionSans-Semibold.woff2') format('woff2'), url('../fonts/SupervisionSans-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
/* Brand font: Supervision Sans (Manrope derivative, SIL OFL 1.1 — see fonts/OFL.txt), replacing the reference's Matter.
   Medium 500 = primary brand weight; Regular 400 for body/resources; Semibold 600 for headings/emphasis.
   Published: Matter, weight 500. Display 51–78px, body 15–20px, buttons/nav 14px/500.
    Scale steps between
   the published ranges are PROPOSED. */
:root {
  --font-family: 'Supervision Sans', Arial, system-ui, sans-serif;
  --font-weight: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --text-display-xl: 78px;
  --text-display-lg: 64px;
  --text-display: 51px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body-lg: 20px;
  --text-body: 16px;
  --text-body-sm: 15px;
  --text-ui: 14px;
  --text-caption: 12px;
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-ui: 1.4;
  --tracking-display: -0.02em;
  --tracking-body: 0;
}

/* colors */
/* Hybrid theme: published Lattice anchors + user-specified Volt greens.
   Sampled illustration colours and proposed UI values are marked below.
   Source: Supervision Hub design handoff, Part 4 (lattice-volt-theme.css). */
:root {
  color-scheme: light;
  /* PUBLISHED Lattice anchors */
  --lattice-primary: #046645;
  --lattice-secondary: #cdface;
  --canvas: #ffffff;
  --surface-cream: #f7f6f2;
  --ink: #02432d; /* Sarah: no black. Was #001f1f */
  --surface-mint: #c9f4ee;
  /* Exact user-specified accents */
  --volt-primary: #00d992;
  --volt-soft: #2fd6a1;
  --volt-deep: #10b981;
  /* SAMPLED screenshot values; not original CSS tokens */
  --hero-deep: #016362;
  --hero-teal: #007a75;
  --hero-aqua: #089891;
  --hero-glow: #42dcb6;
  --art-mint: #82eab5;
  --art-spring: #a0e59e;
  --art-aqua: #48d8c7;
  --art-lavender: #ded9fb;
  --art-periwinkle: #96aefc;
  --art-teal: #008180;
  --art-pale-aqua: #aef2e6;
  /* PROPOSED functional extensions */
  --text-muted: #52645d;
  --border-subtle: #dce5df;
  --border-control: #76877e;
  --surface-hover: #f0f5f1;
  --surface-selected: #eaf8ec;
  --disabled-bg: #e6ece7;
  --disabled-text: #59665f;
  --lattice-hover: #035438;
  --lattice-pressed: #02432d;
  --success: var(--lattice-primary);
  --success-bg: var(--surface-selected);
  --warning: #855600;
  --warning-bg: #fff4d6;
  --danger: #b42318;
  --danger-bg: #fff0ed;
  --info: #175b8c;
  --info-bg: #edf5fc;
  /* Semantic mapping: hybrid is the default */
  --action-bg: var(--volt-primary);
  --action-text: var(--ink);
  --action-hover: var(--volt-soft);
  --action-pressed: var(--volt-deep);
  --text-primary: var(--ink);
  --text-secondary: var(--text-muted);
  --text-link: var(--lattice-primary);
  --text-link-dark: var(--volt-deep);
  --focus-inner: var(--volt-soft);
  --focus-outer: var(--ink);
  /* Semantic surface aliases (added for consumers) */
  --surface-page: var(--canvas);
  --surface-alt: var(--surface-cream);
  --surface-card: var(--canvas);
  --surface-feature: var(--surface-mint);
  --surface-dark: var(--ink);
}

/* spacing */
/* Published radii + spacing (Lattice). Shadow is PROPOSED. */
:root {
  --radius-sm: 7.8px;
  --radius-md: 12.5px;
  --radius-lg: 15.7px;
  --radius-xl: 23.5px;
  --radius-pill: 31.3px;
  --radius-full: 9999px;
  --space-xs: 6.4px;
  --space-sm: 9.4px;
  --space-md: 11.8px;
  --space-lg: 15.7px;
  --space-xl: 19.6px;
  --space-xxl: 23.5px;
  --shadow-card: 0 5px 12px rgb(2 67 45 / 12%), 0 1px 3px rgb(2 67 45 / 8%);
  --control-height: 44px;
  --content-max: 1200px;
}

/* base */
/* Base + component classes, verbatim from the handoff stylesheet (Part 4). */
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text-primary); font-family: var(--font-family); font-weight: 500; font-size: 16px; line-height: 1.5; }
a { color: var(--text-link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 11px 18.8px; border: 1px solid var(--ink);
  border-radius: var(--radius-md); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer;
  text-decoration: none;
}
.button-primary { background: var(--action-bg); color: var(--action-text); }
.button-primary:hover:not(:disabled) { background: var(--action-hover); text-decoration: underline; }
.button-primary:active:not(:disabled) { background: var(--action-pressed); box-shadow: inset 0 0 0 1px var(--ink); }
.button-secondary { background: var(--canvas); color: var(--lattice-primary); border-color: var(--lattice-primary); }
.button-secondary:hover:not(:disabled) { background: var(--surface-selected); text-decoration: underline; }
.button-secondary:active:not(:disabled) { background: var(--lattice-secondary); }
.button-lattice { background: var(--lattice-primary); color: var(--lattice-secondary); border-color: var(--lattice-primary); }
.button-lattice:hover:not(:disabled) { background: var(--lattice-hover); }
.button-lattice:active:not(:disabled) { background: var(--lattice-pressed); }
/* Screenshot-fidelity variant: sampled ends, proposed interpolation */
.button-teal { color: var(--canvas); background: linear-gradient(#026868, #004645); }
.button-teal:hover:not(:disabled) { text-decoration: underline; }
.button-teal:active:not(:disabled) { background: #004645; }
.button-ghost { background: var(--ink); color: var(--volt-soft); }
.button-ghost:hover:not(:disabled) { text-decoration: underline; }
.button-ghost:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--volt-soft); }
.button:disabled { background: var(--disabled-bg); color: var(--disabled-text); border-color: var(--border-subtle); cursor: not-allowed; box-shadow: none; text-decoration: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner);
}
/* Placed after pressed styles so keyboard focus is never overwritten. */
.button:focus-visible { outline: 3px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
.dark-panel { background: var(--ink); color: var(--canvas); }
.dark-panel a { color: var(--text-link-dark); }
.dark-panel .button-secondary { background: transparent; color: var(--lattice-secondary); border-color: var(--lattice-secondary); }
.dark-panel .button-secondary:hover:not(:disabled) { background: var(--lattice-primary); }
.dark-panel .button-ghost { background: transparent; border-color: var(--volt-soft); }
.card { background: var(--canvas); color: var(--ink); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xxl); box-shadow: var(--shadow-card); }
.feature-card { background: var(--surface-mint); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-xxl); }
.art-panel { border-radius: var(--radius-sm); padding: var(--space-xl); background: var(--art-mint); color: var(--ink); }
.art-panel.spring { background: var(--art-spring); }
.art-panel.aqua { background: var(--art-aqua); }
.art-panel.lavender { background: var(--art-lavender); }
.field { display: block; width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); }
.field::placeholder { color: var(--text-muted); opacity: 1; }
.field[aria-invalid='true'] { border-color: var(--danger); }
.field:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
.selected-row { background: var(--surface-selected); color: var(--ink); border-inline-start: 3px solid var(--lattice-primary); }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--volt-primary); border: 1px solid var(--ink); }
.lightning { color: var(--volt-primary); -webkit-text-stroke: .6px var(--ink); }
.tooltip { background: var(--ink); color: var(--canvas); border: 1px solid var(--volt-soft); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }
.status { border-inline-start: 3px solid currentColor; border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); }
.status.success { color: var(--success); background: var(--success-bg); }
.status.warning { color: var(--warning); background: var(--warning-bg); }
.status.danger { color: var(--danger); background: var(--danger-bg); }
.status.info { color: var(--info); background: var(--info-bg); }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sh-spin .8s linear infinite; }
.text-muted { color: var(--text-muted); }
/* Approximate screenshot atmosphere, not extracted source gradients.
   Keep white copy in .hero-copy; test edited content at all viewport sizes. */
.hero-scene {
  background:
    radial-gradient(ellipse at 17% 42%, rgb(66 220 182 / 65%), transparent 44%),
    radial-gradient(ellipse at 86% 28%, rgb(8 152 145 / 80%), transparent 51%),
    linear-gradient(to bottom, var(--hero-deep) 0%, var(--hero-teal) 27%, #c5f2e5 65%, var(--canvas) 90%);
}
.hero-copy { background: rgb(2 67 45 / 76%); color: var(--canvas); border-radius: var(--radius-lg); padding: var(--space-xxl); }
.cta-glow { background: radial-gradient(ellipse at 20% 50%, #dcf8f3, transparent 60%), var(--canvas); }
@media (forced-colors: active) {
  .button, .field, .card, .live-dot { border: 1px solid ButtonText; }
  :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}