/* ==========================================================================
   Kutri.net Swiss Design System — base + component rules
   HAND-MAINTAINED source (NOT generated — edit freely, then run `make check`).
   The build validates this file (var() resolution, no raw hex, no :root token
   definitions, no kc-prefix or semantic aliases) and concatenates it with the
   generated styles/kutri-tokens.css into styles/kutri.css.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/*  RESET + BASE                                                              */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ROOT CONTRACT: 112.5% = 18px at the browser default — NOT a fixed 18px,
     so user "larger text" settings still scale everything (a11y F11).
     All rem values in the tokens resolve against this. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  color: var(--color-petrooli);
  letter-spacing: var(--ls-title);
}

/* D2 display heading: clamp(42px, 4vw, 72px) at default root, lh 1.1, ls -0.01em */
h1 { font-size: var(--text-6xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--ls-label); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-petrooli);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-keskisininen-a11y); } /* 4.96:1 on white — plain keskisininen is 4.39:1 */

/* Code */
code, pre {
  font-family: var(--font-mono);
  background: var(--color-bg-sininen);
  color: var(--text-primary);
  border-radius: var(--radius);
}
code { padding: 0.1em 0.4em; font-size: 0.9em; }
pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border-1) solid var(--color-keskisininen);
}
pre code { padding: 0; background: transparent; }

/* -------------------------------------------------------------------------- */
/*  FOCUS STYLES (WCAG AA)                                                    */
/* -------------------------------------------------------------------------- */
/* GLOBAL two-tone double ring — works on white, tinted, laivasto AND petrooli
   surfaces with no per-context scoping: at least one ring is >=3:1 on ANY surface. */
:focus-visible {
  outline: var(--border-3) solid var(--color-petrooli);
  outline-offset: 2px;
  border-radius: var(--radius);
  /* inner white ring fills the offset gap -> at least one ring >=3:1 on ANY surface */
  box-shadow: 0 0 0 2px var(--color-valkoinen);
}

/* -------------------------------------------------------------------------- */
/*  BUTTONS                                                                   */
/* -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-comfortable);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: var(--border-2) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.button:disabled { opacity: 0.4; cursor: not-allowed; }

.button--primary {
  background: var(--color-petrooli);
  color: var(--text-inverse);
}
.button--primary:hover:not(:disabled) { opacity: 0.85; }

.button--secondary {
  background: transparent;
  color: var(--color-petrooli);
  border-color: var(--color-petrooli);
}
.button--secondary:hover:not(:disabled) {
  background: var(--color-petrooli);
  color: var(--text-inverse);
}

.button--tertiary {
  background: var(--color-vaaleaturkoosi);
  color: var(--text-primary);
}
.button--tertiary:hover:not(:disabled) { opacity: 0.85; }

.button--ghost {
  background: transparent;
  color: var(--color-petrooli);
  text-decoration: underline;
  border-color: transparent;
  padding: var(--space-2) var(--space-3);
  min-height: auto;
}

.button--danger {
  background: var(--color-varoitus);
  color: var(--text-inverse);
}
.button--danger:hover:not(:disabled) { opacity: 0.85; }

/* -------------------------------------------------------------------------- */
/*  FORM ELEMENTS                                                             */
/* -------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-secondary);
}

.input, .textarea, .select {
  width: 100%;
  min-height: var(--touch-comfortable);
  padding: var(--space-3);
  font-family: var(--font-family);
  font-size: var(--text-lg);
  color: var(--text-primary);
  background: var(--surface-0);
  border: var(--border-1) solid var(--color-keskisininen);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.input:focus, .textarea:focus, .select:focus {
  outline: var(--border-2) solid var(--color-petrooli);
  outline-offset: 0;
  border-color: var(--color-petrooli);
}
.input::placeholder, .textarea::placeholder { color: var(--text-secondary); opacity: 1; } /* 8.86:1 — 0.7 opacity was ~3.95:1 */

/* Error state: border color alone is NOT sufficient — always pair with a
   visible error text or icon (WCAG 1.4.1, use of color). */
.input--error { border-color: var(--color-varoitus); }

.textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }

/* Checkbox & Radio — natiivit tyylillä */
.checkbox, .radio {
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  accent-color: var(--color-petrooli);
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/*  INFO BOXES — D6: borderless tinted boxes                                  */
/* -------------------------------------------------------------------------- */
.info-box {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg-sininen);
}
.info-box--pink {
  background: var(--color-bg-pinkki);
}
.info-box--success {
  background: var(--color-vaaleaturkoosi);
}
.info-box--warning {
  background: var(--color-bg-oranssi);
}
/* keskisininen-a11y fails 4.5:1 on tinted backgrounds — petrooli is 7.5-8.2:1 on all tints */
.info-box a:hover { color: var(--color-petrooli); }

/* -------------------------------------------------------------------------- */
/*  CHIPS / BADGES                                                            */
/* -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-vaaleaturkoosi);
  color: var(--text-primary);
  border-radius: var(--radius);
}
.chip--accent  { background: var(--color-keskisininen-a11y); color: var(--text-inverse); } /* white 4.96:1 */
.chip--success { background: var(--color-turkoosi); color: var(--text-primary); }
.chip--warning { background: var(--color-oranssi); color: var(--text-primary); } /* black 8.89:1 — white was 2.36:1 */
.chip--danger  { background: var(--color-pinkki); color: var(--text-primary); }
.chip--supplement { border-radius: var(--radius-full); }

/* -------------------------------------------------------------------------- */
/*  HIGHLIGHT MARKER (D5)                                                     */
/* -------------------------------------------------------------------------- */
/* Max YKSI per sivu, vain hero-otsikossa. Tähdet säilyttävät roolinsa. */
.kutri-marker {
  background: var(--color-keltaoranssi);
  color: var(--color-petrooli); /* PINNED — 5.38:1; asserted in a11y-pairs. NEVER inherit:
                                   inherited white on keltaoranssi is 1.61:1 on dark bands. */
  padding: 0 0.12em;
  border-radius: var(--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* -------------------------------------------------------------------------- */
/*  SECTION SEPARATORS                                                        */
/* -------------------------------------------------------------------------- */
.section-separator {
  height: 10px;
  margin: var(--space-6) 0;
  background: var(--color-petrooli);
}
.section-separator--turkoosi    { background: var(--color-turkoosi); }
.section-separator--oranssi     { background: var(--color-oranssi); }
.section-separator--keskisininen{ background: var(--color-keskisininen); }

.section-divider {
  border: 0;
  border-top: var(--border-2) solid var(--color-petrooli);
  margin: var(--space-6) 0 var(--space-5);
}

/* -------------------------------------------------------------------------- */
/*  HEADER & FOOTER                                                           */
/* -------------------------------------------------------------------------- */
.header {
  background: var(--color-petrooli);
  color: var(--text-inverse);
  padding: var(--space-4) var(--space-5);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header a { color: var(--text-inverse); }
.header a:hover { color: var(--color-vaaleaturkoosi); }

.footer {
  background: var(--color-laivasto);
  color: var(--text-inverse);
  padding: var(--space-7) var(--space-5);
}
.footer a { color: var(--color-vaaleaturkoosi); }

/* -------------------------------------------------------------------------- */
/*  PROGRESS                                                                  */
/* -------------------------------------------------------------------------- */
.progress-line {
  height: 4px;
  background: var(--surface-1);
  border-radius: var(--radius);
  overflow: hidden;
}
/* The gradient below is the ONE documented exception to the no-gradient rule —
   listed in tokens/a11y-pairs.json "exceptions". */
.progress-line__fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-petrooli), var(--color-turkoosi));
  transition: width var(--duration-default) var(--ease-standard);
}

/* -------------------------------------------------------------------------- */
/*  MODAL                                                                     */
/* -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal {
  position: relative;
  z-index: var(--z-modal);
  background: var(--surface-0);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  border: var(--border-1) solid var(--color-keskisininen);
}

/* -------------------------------------------------------------------------- */
/*  UTILITIES                                                                 */
/* -------------------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow { max-width: 760px; }

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

/* -------------------------------------------------------------------------- */
/*  MOTION PREFERENCES                                                        */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/*  RESPONSIVE                                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
}