/* KRIK Lokallagsportal — production stylesheet
   Ported from the Claude Design prototype (KRIK Lokallagsportal - 1b.dc.html)
   and its design-system tokens. Values are kept 1:1 with the prototype;
   responsive rules are additive (the prototype had none). */

/* ---------- Fonts ---------- */
@font-face{font-family:'Exo';src:url('../assets/fonts/Exo-ExtraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Exo';src:url('../assets/fonts/Exo-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Exo';src:url('../assets/fonts/Exo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Exo';src:url('../assets/fonts/Exo-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Exo';src:url('../assets/fonts/Exo-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --krik-blue:#0a55a1;
  --krik-blue-deep:#083f78;
  --krik-blue-tint:#e6eef7;
  --krik-black:#000000;
  --krik-white:#ffffff;
  --krik-grey-900:#111315;
  --krik-grey-600:#5b6167;
  --krik-grey-300:#c8ced4;
  --krik-grey-100:#f1f3f5;

  --brand-primary:var(--krik-blue);
  --brand-primary-pressed:var(--krik-blue-deep);
  --logo-ink:var(--krik-blue);
  --logo-ink-mono:var(--krik-black);
  --logo-ink-reverse:var(--krik-white);
  --text-strong:var(--krik-grey-900);
  --text-body:var(--krik-grey-600);
  --text-on-brand:var(--krik-white);
  --surface-page:var(--krik-white);
  --surface-muted:var(--krik-grey-100);
  --surface-brand:var(--krik-blue);
  --border-hairline:var(--krik-grey-300);
  --focus-ring:var(--krik-blue);

  --font:'Exo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --gutter:44px;
  --logo-wordmark-aspect:2.3794;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);font-family:var(--font);color:var(--text-strong);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
input,button{font-family:var(--font)}
button{border:0;background:none;padding:0;font:inherit;color:inherit}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-primary-pressed)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
.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}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--krik-white);color:var(--krik-grey-900);padding:12px 18px;z-index:100;transition:top 140ms;font:500 13px/1 var(--font)}
.skip-link:focus{top:12px}

.page{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page)}
main{flex:1}

/* ---------- Header ---------- */
.site-header{display:flex;align-items:center;padding:22px var(--gutter);background:var(--krik-blue);position:sticky;top:0;z-index:5}
.brand-link{display:flex;align-items:center;gap:20px;min-width:0}
.brand-wordmark{display:block;flex:0 0 auto;width:calc(20px * var(--logo-wordmark-aspect));height:20px}
.brand-divider{width:1px;height:22px;background:rgba(255,255,255,.35);flex:0 0 auto}
.brand-label{font:400 12px/1 var(--font);letter-spacing:.14em;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Buttons / chips (shared) ---------- */
.chip{padding:10px 16px;font:400 12px/1 var(--font);letter-spacing:.08em;cursor:pointer;transition:all 140ms;border:1px solid var(--border-hairline);background:#fff;color:var(--krik-grey-900)}
.chip.is-on{border-color:var(--brand-primary);background:var(--brand-primary);color:#fff;font-weight:500}
.chip.chip-sm{padding:10px 12px}
.chip:disabled{opacity:.45;cursor:not-allowed}

.btn-primary{border:0;background:var(--brand-primary);color:#fff;padding:16px 24px;font:500 13px/1 var(--font);letter-spacing:.12em;cursor:pointer;transition:background 140ms;width:100%;text-align:center}
.btn-primary:hover{background:var(--brand-primary-pressed)}
.btn-primary:disabled{background:var(--krik-grey-300);cursor:progress}

.link-list{display:flex;gap:26px;font:400 12px/1 var(--font);letter-spacing:.06em;color:var(--brand-primary);flex-wrap:wrap}
.link-list button{cursor:pointer}
.link-list button:hover{color:var(--brand-primary-pressed)}

/* ---------- Generator screen ---------- */
.hero-generator{background:var(--brand-primary);padding:0 var(--gutter) 76px}
.hero-generator h1{padding:60px 0 10px;font:200 clamp(40px,6vw,84px)/1 var(--font);letter-spacing:-.01em;color:#fff;text-transform:uppercase}
.hero-generator .lede{margin:0 0 46px;max-width:54ch;font:400 16px/1.55 var(--font);color:rgba(255,255,255,.8);text-wrap:pretty}

.builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;box-shadow:0 24px 60px rgba(8,63,120,.28)}
.builder-form{padding:44px;display:flex;flex-direction:column;gap:28px;min-width:0}
.field-label{font:400 11px/1 var(--font);letter-spacing:.16em;color:var(--text-body);margin-bottom:12px}
.field-hint{margin-top:8px;font:400 12px/1.4 var(--font);color:var(--text-body)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.text-input{width:100%;box-sizing:border-box;border:1px solid var(--border-hairline);border-radius:0;padding:14px 16px;font:400 18px/1.2 var(--font);letter-spacing:.04em;color:var(--krik-grey-900);outline:none;text-transform:uppercase;background:#fff}
.text-input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 1px var(--brand-primary)}
.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.swatch-row{display:flex;gap:10px}
.swatch{width:34px;height:34px;cursor:pointer;border:1px solid var(--krik-grey-300);padding:0}
.swatch.is-on{outline:2px solid var(--brand-primary);outline-offset:3px}

.builder-preview{background:var(--surface-muted);border-left:1px solid var(--border-hairline);display:flex;flex-direction:column;min-width:0;transition:background 140ms}
.preview-pane{flex:1;display:flex;align-items:center;justify-content:center;padding:56px;min-height:320px;min-width:0;overflow:hidden}
.preview-backdrop{display:inline-block;transform-origin:center center;transition:transform 140ms,background 140ms,padding 140ms}
.preview-meta{display:flex;justify-content:space-between;padding:18px 28px;border-top:1px solid var(--border-hairline);font:400 11px/1 var(--font);letter-spacing:.08em;color:var(--text-body);background:#fff;gap:12px}
.preview-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.section-pad{padding:64px var(--gutter) 96px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.section-head h2{font:300 32px/1 var(--font);letter-spacing:-.01em;color:var(--krik-grey-900);text-transform:uppercase}

.kits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kit-card{border:1px solid var(--border-hairline);padding:28px;display:flex;flex-direction:column;gap:12px;min-height:150px;cursor:pointer;transition:border-color 140ms;background:none;text-align:left;width:100%}
.kit-card:hover,.kit-card:focus-visible{border-color:var(--brand-primary)}
.kit-card:disabled{cursor:not-allowed}
.kit-kind{font:400 11px/1 var(--font);letter-spacing:.14em;color:var(--text-body)}
.kit-name{font:400 20px/1.2 var(--font);color:var(--krik-grey-900);text-transform:uppercase}
.kit-note{font:400 14px/1.5 var(--font);color:var(--text-body);margin-top:auto}
.kit-badge{align-self:flex-start;font:400 10px/1 var(--font);letter-spacing:.1em;color:var(--brand-primary);background:var(--krik-blue-tint);padding:4px 8px}

/* ---------- Privacy / 404 pages ---------- */
.prose{padding:56px var(--gutter) 96px;max-width:70ch}
.prose h1{font:300 40px/1.1 var(--font);letter-spacing:-.01em;color:var(--krik-grey-900);text-transform:uppercase;margin-bottom:24px}
.prose h2{font:400 18px/1.3 var(--font);color:var(--krik-grey-900);text-transform:uppercase;margin:32px 0 12px;letter-spacing:.02em}
.prose p,.prose li{font:400 15px/1.6 var(--font);color:var(--text-body)}
.prose ul{padding-left:20px}
.prose a{color:var(--brand-primary)}

/* ---------- Footer ---------- */
.site-footer{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border-hairline);background:#fff}
.site-footer > *{padding:26px var(--gutter);font:400 12px/1 var(--font);color:var(--text-body)}
.site-footer > *:not(:first-child){padding-left:26px}
.site-footer a{color:var(--text-body)}
.site-footer a:hover{color:var(--brand-primary)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--krik-grey-900);color:#fff;font:400 13px/1.4 var(--font);padding:14px 20px;max-width:min(86vw,440px);opacity:0;pointer-events:none;transition:opacity 160ms,transform 160ms;z-index:50}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--gutter:24px}
  .builder{grid-template-columns:1fr}
  .builder-preview{border-left:0;border-top:1px solid var(--border-hairline)}
  .field-grid-2{grid-template-columns:1fr 1fr;gap:16px}
  .kits-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .field-grid-2{grid-template-columns:1fr}
  .kits-grid{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
}

@media print{
  .site-header,.site-footer,.toast{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.001ms!important;animation-duration:0.001ms!important}
}