/* =========================================================
   COPPLA: designsystemet.

   Tokens, reset och de få byggstenar som både inloggningen och
   appen använder. Samma skala och samma färger som resten av
   Frontness-familjen, så apparna inte glider isär.

   Ingenting i auth.css eller app.css får uppfinna en egen färg.
   ========================================================= */

:root{
  color-scheme:light;

  --background:#ffffff;
  --foreground:#111111;
  --ink:#0a0a0a;
  --muted:#8d8d8d;
  --subtle:#b6b6b6;
  --line:#e6e5e2;
  --surface:#f1f0ee;
  --surface-2:#e3e2df;
  --accent:#b15f2c;

  /* Färgpar. Varje färg som BÄR text har en partner, för texten kan inte
     stanna vit när bakgrunden blir ljus i mörkt läge. Att skriva color:#fff
     bredvid background:var(--ink) fungerade så länge det bara fanns ett
     läge — nu är det ett fel som visar sig som vitt på vitt. */
  --on-ink:#ffffff;
  --on-accent:#ffffff;

  /* Appbrickan. Logotyperna är ritade för vitt och behåller det i båda
     lägena; de streckritade ikonerna följer med resten. */
  --tile:#ffffff;

  /* Accentens ljusaste ton: ikryssat, markerat, valt. */
  --tint:#fdf8f4;

  /* Kod och startprompt: text man kopierar, inte text man läser. Den ska
     skilja sig från sidan omkring — i ljust läge genom att vara mörk, i
     mörkt genom att vara en aning ljusare än kortet. Att bara vända den
     hade gett en cremefärgad platta som lyser mer än allt annat på en
     mörk skärm. */
  --code-bg:#0a0a0a;
  --code-fg:#f1f0ee;

  /* Lägesfärger. Samma tre betydelser i båda lägena, olika ljushet. */
  --ok:#2f6b4a;        --ok-bg:#e8f0ea;
  --warn:#8a4a1d;      --warn-bg:#f6ece4;
  --danger:#b3261e;    --danger-bg:#fbeceb;

  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  --radius-control:.875rem;
  --shadow-card:0 1px 2px rgba(17,17,16,.04), 0 8px 24px -10px rgba(17,17,16,.10);
  --glans:rgba(17,17,16,.04);
  --container:76rem;
}

/* ============================== mörkt läge ==========================
   Samma tokens, andra värden. Ingen regel längre ner i filerna vet om
   vilket läge som gäller — det är hela poängen med att allt går genom
   variabler, och det som INTE gjorde det syns nu som en bugg.

   Två vägar in, och ordningen mellan dem är hela logiken:

     1. Systemets inställning gäller som förval. Den som kört mörkt läge
        i sin dator har redan sagt vad hen vill ha; att fråga igen är att
        inte lyssna.
     2. Ett eget val vinner över systemet. `data-theme` sätts på <html>
        av knappen i topbaren och sparas i webbläsaren.

   `:root:not([data-theme="light"])` i mediafrågan är det som gör att
   punkt 2 kan vinna över punkt 1: utan den kan man inte välja ljust läge
   på en dator som står i mörkt. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
  :root:not([data-theme="light"]){
    --background:#141413;
    --foreground:#ece9e4;
    /* --ink vänder. I ljust läge är det nästan svart och bär vit text; i
       mörkt är det nästan vitt och bär mörk. Knappen är densamma — det är
       kontrasten som ska vara maximal, inte färgen som ska vara svart. */
    --ink:#f2efe9;
    --on-ink:#141413;
    --muted:#9a958c;
    --subtle:#6b675f;
    --line:#2c2b28;
    --surface:#0f0f0e;
    --surface-2:#1e1d1b;
    /* Ljusare accent. #b15f2c är gjord för att synas MOT vitt och blir en
       brun fläck mot svart. */
    --accent:#d98a4e;
    --on-accent:#1a1209;
    --tile:#1e1d1b;
    --tint:#2a211a;
    --code-bg:#221f1c;
    --code-fg:#ece9e4;
    --ok:#7fc39a;      --ok-bg:#17291f;
    --warn:#e0a870;    --warn-bg:#2a1f14;
    --danger:#e88b8b;  --danger-bg:#2c1817;
    --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.55);
    --glans:rgba(255,255,255,.05);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --background:#141413;
  --foreground:#ece9e4;
  --ink:#f2efe9;
  --on-ink:#141413;
  --muted:#9a958c;
  --subtle:#6b675f;
  --line:#2c2b28;
  --surface:#0f0f0e;
  --surface-2:#1e1d1b;
  --accent:#d98a4e;
  --on-accent:#1a1209;
  --tile:#1e1d1b;
  --tint:#2a211a;
  --code-bg:#221f1c;
  --code-fg:#ece9e4;
  --ok:#7fc39a;      --ok-bg:#17291f;
  --warn:#e0a870;    --warn-bg:#2a1f14;
  --danger:#e88b8b;  --danger-bg:#2c1817;
  --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.55);
  --glans:rgba(255,255,255,.05);
}

/* ============================= reset ============================= */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:var(--background); color:var(--foreground);
      font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img,svg{ display:block }
/* [hidden] är bara display:none i användaragentens stilmall och förlorar mot
   varje egen display-regel. Tvinga igenom den. */
[hidden]{ display:none !important }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.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 }

/* Rotstorleken skalar med viewporten, men bara monotont och inom golv/tak:
   annars kollapsar brödtexten under läsbar storlek i mellanlägena. */
@media (max-width:640px){  html{ font-size:clamp(16px, 4.444444vw, 19px) } }
@media (min-width:1921px){ html{ font-size:clamp(16px, 0.833333vw, 20px) } }

/* ============================ skip link =========================== */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:var(--on-ink);
}

/* ============================== pill ==============================
   Den primära knappen. Ytterhöljet skalar, innerhöljet bär färgen, och
   brickan till höger är scenen för pilen och spinnern. */
.pill{ display:inline-block }
.pill__scale{ display:inline-block }
.pill__in{
  display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--radius-pill);
  font-size:.875rem; font-weight:500; padding:.375rem .375rem .375rem 1.5rem;
}
.pill--dark .pill__in{ background:var(--ink); color:var(--on-ink) }
.pill--light .pill__in{ background:var(--surface); color:var(--foreground) }
.pill--outline .pill__in{ border:1px solid var(--line); background:transparent; color:var(--foreground) }
.pill__badge{
  width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--radius-pill);
  font-size:1rem; background:var(--ink); color:var(--on-ink); flex:none;
}
.pill--dark .pill__badge{ background:var(--on-ink); color:var(--ink) }

/* ============================= logotyp ============================ */
/* Ritad form, inte satt text. Ordmärket bar tidigare sin egen typografi
   (Onest 600, -.03em) och en prick i ::after — alltså ett märke som såg rätt
   ut bara så länge typsnittet hann laddas och ingen rörde bokstavsavståndet.

   Höjden sätts på SVG:n och bredden följer med. Bokstäverna upptar 96 av
   viewBoxens 129 enheter — resten är p:ets stapel nedåt — så en ruta på
   1.75rem ger ett ordmärke som optiskt väger som 1.25rem text vägde. */
.logo{ display:inline-flex; align-items:center; color:var(--foreground) }
.logo__mark{ display:block; height:1.75rem; width:auto; fill:currentColor }
/* Pricken är varumärkets, inte ordets: den håller accentfärgen medan
   bokstäverna följer texten omkring dem. */
.logo__prick{ fill:var(--accent) }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important }
}

/* ============================ rullningslister ======================
   Tunna och tysta. Webbläsarens egen är byggd för ett dokument man
   scrollar i, inte för fyra paneler bredvid varandra — fyra breda
   ljusa stolpar i en mörk app tar mer uppmärksamhet än innehållet de
   hör till. De syns fortfarande: en osynlig rullningslist är en
   gömd upplysning om att det finns mer. */
*{ scrollbar-width:thin; scrollbar-color:var(--surface-2) transparent }
*::-webkit-scrollbar{ width:.5rem; height:.5rem }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:var(--surface-2); border-radius:9999px;
  border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--subtle); background-clip:padding-box }
*::-webkit-scrollbar-corner{ background:transparent }