/* ============================================================
   Scrumbox — base.css
   Modern reset, element defaults, focus ring, utilities.
   Depends on tokens.css (must be linked BEFORE this file).
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, pre {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  background-color: var(--color-background);
  color: var(--color-on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Headlines use the editorial serif */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--text-headline-lg-weight);
  color: var(--color-primary);
  line-height: 1.2;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  font-weight: var(--text-display-lg-weight);
  letter-spacing: var(--text-display-lg-tracking);
}

h2 {
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line);
}

h3 {
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
  font-weight: var(--text-title-md-weight);
}

@media (max-width: 768px) {
  h1 {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-line);
  }
  h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
  margin: 0;
}

/* ---------- Focus: strong, visible, caramel ---------- */
:focus-visible {
  outline: 2.5px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Never remove the ring; only suppress the legacy always-on outline. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Typography helper classes ---------- */
/* .t-display / .t-headline / .t-title / .t-body / .t-body-sm / .t-label
   Apply the DESIGN.md type ramp to any element. */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  font-weight: var(--text-display-lg-weight);
  letter-spacing: var(--text-display-lg-tracking);
}

.t-headline {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line);
  font-weight: var(--text-headline-lg-weight);
}

.t-title {
  font-family: var(--font-ui);
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line);
  font-weight: var(--text-title-md-weight);
}

.t-body {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
}

.t-body-sm {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
}

.t-muted {
  color: var(--color-on-surface-variant);
}

/* ---------- Utilities ---------- */

/* .sr-only — visually hidden, still read by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* .skip-link — hidden until focused, then a caramel pill top-left. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* .stack — vertical flex column; gap via --stack-gap (default 12px). */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--stack-md));
}

/* .row — horizontal flex row, vertically centred; gap via --row-gap (default 12px). */
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--row-gap, var(--stack-md));
}

/* .spacer — flexible filler inside .row / .stack, pushes siblings apart. */
.spacer {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* .truncate — single-line ellipsis. Parent needs a constrained width. */
.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .clamp-2 / .clamp-3 — multi-line ellipsis. */
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* .scroll-x — horizontal scroll container (kanban lanes etc.). */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* .scroll-y — vertical scroll container. */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* .no-wrap — prevent flex children from wrapping. */
.no-wrap { flex-wrap: nowrap; }

/* .full — width:100%. */
.full { width: 100%; }

/* .hide-sm — hidden at <=768px. */
@media (max-width: 768px) {
  .hide-sm { display: none !important; }
}

/* ---------- Warm, thin, always-usable scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-outline-variant);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-outline);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::selection {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}