/* Felles stil for navnefest-quizen.
   Alle farger defineres på bar :root. Mørk variant overstyrer BARE tokens,
   slik at ingen farge finnes kun bak en media-spørring. */

:root {
  --ground:      #FBF6F0;
  --ground-2:    #F4EBE1;
  --flate:       #FFFFFF;
  --ink:         #2A2422;
  --ink-svak:    #7A6C63;
  --kant:        #E4D7C9;
  --plomme:      #9A5B6E;
  --plomme-dyp:  #6E3B4C;
  --gull:        #B8893B;
  --salvie:      #6E8B72;
  --paa-plomme:  #FFF7F2;
  --gull-svak:   #F6EBD6;
  --solv:        #C9C4BD;
  --bronse:      #C08B63;
  --paa-gull:    #FFF9EE;
  --paa-solv:    #2A2422;
  --paa-bronse:  #2A2422;
  --skygge:      0 1px 2px rgba(42,36,34,.06), 0 8px 24px rgba(42,36,34,.07);
  --rund:        14px;
  --vis:         'Fraunces', 'Iowan Old Style', Georgia, serif;
  --brod:        'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #191413;
    --ground-2:   #221A18;
    --flate:      #241C1A;
    --ink:        #F2E9E1;
    --ink-svak:   #AD9C90;
    --kant:       #3A2D29;
    --plomme:     #D89AAC;
    --plomme-dyp: #EBBECA;
    --gull:       #E0B565;
    --salvie:     #9CBCA1;
    --paa-plomme: #241C1A;
  --gull-svak:  #3A2E1C;
  --solv:       #8B857D;
  --bronse:     #8A5F3E;
  --paa-gull:   #241C1A;
  --paa-solv:   #F2E9E1;
  --paa-bronse: #F2E9E1;
    --gull-svak:  #3A2E1C;
    --solv:       #8B857D;
    --bronse:     #8A5F3E;
    --paa-gull:   #241C1A;
    --paa-solv:   #F2E9E1;
    --paa-bronse: #F2E9E1;
    --skygge:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  --ground:     #191413;
  --ground-2:   #221A18;
  --flate:      #241C1A;
  --ink:        #F2E9E1;
  --ink-svak:   #AD9C90;
  --kant:       #3A2D29;
  --plomme:     #D89AAC;
  --plomme-dyp: #EBBECA;
  --gull:       #E0B565;
  --salvie:     #9CBCA1;
  --paa-plomme: #241C1A;
  --skygge:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--brod);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--vis);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .4em;
}

.merkelapp {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-svak);
  font-weight: 700;
}

.kort {
  background: var(--flate);
  border: 1px solid var(--kant);
  border-radius: var(--rund);
  box-shadow: var(--skygge);
}

button, .knapp {
  font-family: var(--brod);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: var(--flate);
  border: 1.5px solid var(--kant);
  border-radius: 11px;
  padding: 13px 18px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .08s;
}
button:hover, .knapp:hover { border-color: var(--plomme); }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--plomme);
  outline-offset: 2px;
}
button[disabled] { opacity: .4; cursor: default; }
button[disabled]:hover { border-color: var(--kant); }

.primar {
  background: var(--plomme-dyp);
  border-color: var(--plomme-dyp);
  color: var(--paa-plomme);
}
.primar:hover { background: var(--plomme); border-color: var(--plomme); }

input[type=text], input[type=number], textarea {
  font-family: var(--brod);
  font-size: 17px;
  color: var(--ink);
  background: var(--flate);
  border: 1.5px solid var(--kant);
  border-radius: 11px;
  padding: 13px 15px;
  width: 100%;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.tall { font-variant-numeric: tabular-nums; }

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