/* CLARA grafisk profil 2026 — designtokens.
   Källa: design/CLARA-grafisk-profil-2026.md. Ändra inte värden här utan
   att profilen ändras först; profilen är sanningen, den här filen är dess
   maskinläsbara form. Gäller alla vyer, inte bara verktygskatalogen. */

:root {
  /* --- Lager ------------------------------------------------------ */
  --falt: linear-gradient(174deg, #E3EAF9, #D7E0F4);
  --falt-fallback: #DDE5F6;
  --platta: #FFFFFF;
  --kort: #F7F5F1;
  --yttre: #F4F6FB;

  /* --- Bläck och varmgrått ---------------------------------------- */
  --black: #14121A;          /* rubriker, inmatad text */
  --loptext: #4A463E;        /* löptext och sekundärt */
  --etikett: #6B665C;        /* etiketter och ikoner */
  --linje-harfin: #EDEAE3;   /* hårfina linjer, neutrala brickor */
  --linje-kort: #E4E0D8;     /* linjer inuti kort, fältramar */

  /* --- Blått: allt klickbart, ingenting annat --------------------- */
  --bla: #214CEE;            /* primär knapp och länk */
  --bla-mork: #16307F;       /* hover, aktiv pill, text på ljusblått */
  --bla-yta-hover: #E4EBFC;
  --bla-yta-vilande: #F4F7FE;

  /* --- Lila: tid -------------------------------------------------- */
  --lila: #7A00E8;
  --lila-yta: #F4E8FF;
  --lila-fylld: #8100FF;
  --lila-toning: #8B51EF;

  /* --- Rött: fel och validering, inget annat ---------------------- */
  --fel: #C93933;

  /* --- Gult: människans markering, aldrig status ------------------ */
  --gul-ikon: #E8FF00;
  --gul-yta: #E9FF5A;

  /* --- Toningar: endast dessa två --------------------------------- */
  --toning-notis: linear-gradient(180deg, #B6AEFF, #9B53FF, #8100FF);
  --toning-progression: linear-gradient(90deg, #8B51EF 0%, #685EC8 50%, #214CEE 100%);

  /* --- Profilikoner ----------------------------------------------- */
  --avatar-medarbetare: linear-gradient(180deg, #211E2B, #14121A);
  --avatar-student: linear-gradient(180deg, #7A7A82, #64646C);
  --avatar-jag: linear-gradient(180deg, #2C56F3, #1A41DD);

  /* --- Typografi -------------------------------------------------- */
  --typsnitt: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --typsnitt-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Radier ----------------------------------------------------- */
  --r-platta: 28px;
  --r-knapp: 24px;
  --r-pill: 20px;
  --r-kort: 18px;
  --r-etikett: 15px;
  --r-smayta: 13px;
  --r-rund: 999px;

  /* --- Kontrollhöjder --------------------------------------------- */
  --h-primar: 44px;          /* primärhandling */
  --h-flik: 38px;            /* flikar och filter */
}

/* Etikett — 11 / 600 / 0.14em versal / #6B665C. Egen klass eftersom
   kombinationen återkommer i varje vy. */
.etikett {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etikett);
}

/* Profilen använder inga skuggor. Kortens skuggor i verktygskatalogen är
   ett medvetet undantag för 3D-karusellen och bor i katalog.css. */