/* =============================================================================
   ECOSOUND · BASE
   Reset, root layout, typography defaults, scrollbars, selection.
   All values reference tokens.css — avoid hard-coded values here.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--ecs-paper-alt);
  font-family: var(--ecs-font-body);
  color: var(--ecs-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ecs-green-600);
  text-decoration: none;
  transition: color var(--ecs-dur-fast) var(--ecs-ease);
}
a:hover {
  color: var(--ecs-forest-500);
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--ecs-green-300);
  color: var(--ecs-forest-800);
}

/* The parts of the page nobody draws still carry the palette: native ticks,
   radios and ranges, and the caret in every field. */
:root { accent-color: var(--ecs-forest-500); }
input,
textarea { caret-color: var(--ecs-forest-500); }

/* ---- Keyboard focus -----------------------------------------------------
   One treatment for every interactive element in the portal: a 2px ink-green
   ring 2px off the edge over a mint halo that fills the gap and shows past it.
   Pointer clicks are unaffected — that is :focus-visible's job.

   Zero specificity (`:where`), so a component whose geometry needs something
   else overrides it with an ordinary class rule: a grid cell or a tree row
   flush inside a scroller draws its ring inset, where a scroller cannot clip
   it. Form fields keep their own border-and-halo on :focus (design.md rule 6)
   and set `outline: none`, which beats this too. */
:where(a[href], button, summary, select, textarea, input, [tabindex], [role='button']):focus-visible {
  outline: var(--ecs-focus-width) solid var(--ecs-focus-ring);
  outline-offset: var(--ecs-focus-offset);
  box-shadow: 0 0 0 var(--ecs-focus-halo-w) var(--ecs-focus-halo);
}

h1,
h2,
h3,
h4 {
  font-family: var(--ecs-font-display);
  margin: 0;
}

p {
  margin: 0;
}

/* ---- App root: full-viewport stage ------------------------------------- */
#ecs-app {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: var(--ecs-paper);
  overflow: hidden;
}

/* A screen fills the stage and stacks above the previous during transitions */
.ecs-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Custom scrollbars -------------------------------------------------- */
.ecs-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ecs-line-strong) transparent;
}
.ecs-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ecs-scroll::-webkit-scrollbar-thumb {
  background: var(--ecs-line-strong);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ---- Utility text styles used across screens --------------------------- */
.ecs-eyebrow {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-semi);
  font-size: var(--ecs-fs-2xs);
  letter-spacing: var(--ecs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ecs-forest-500);
}

/* The brand's signature label above a heading: green, uppercase, letterspaced.
   Tighter and quieter than .ecs-eyebrow, which the marketing hero uses. */
.ecs-kicker {
  font-family: var(--ecs-font-mono);
  font-weight: var(--ecs-fw-medium);
  font-size: var(--ecs-fs-3xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ecs-forest-500);
}
/* On ink the kicker takes the panel green — the brand's accent on dark,
   6.29:1 against #2C2E35. */
.ecs-kicker--on-dark { color: var(--ecs-green-400); }

.ecs-mono {
  font-family: var(--ecs-font-mono);
}

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

/* Visually hidden, still announced. A column whose header is an icon or an
   action still needs a name for anyone not looking at it.

   Deliberately IN FLOW rather than the usual `position: absolute`. An absolutely
   positioned box is contained by the nearest positioned ancestor, not by the
   nearest scroller — so inside a horizontally scrolling table it escapes the
   scroller, lands at the static position of a cell 900px to the right, and
   silently stretches the whole page's scroll width. A one-pixel in-flow box
   cannot do that anywhere it is dropped. */
.ecs-sr-only {
  display: inline-block;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  vertical-align: top;
}