/* =========================================================
   Kongshaug Musikkgymnas — Admissions System
   Design Tokens · v1.0
   ---------------------------------------------------------
   Drop-in CSS custom properties for the WordPress plugin.
   Scope under .kongshaug-admissions to avoid bleeding into
   default WP admin styles.
   ========================================================= */

.kongshaug-admissions,
.kongshaug-admissions :root,
:root.kongshaug-admissions {

  /* ---------- Surfaces ---------- */
  --k-bg-page:        #F4F6FA;
  --k-bg-canvas:      #ECEFF5;
  --k-surface:        #FFFFFF;
  --k-surface-soft:   #F8FAFC;
  --k-surface-sunken: #EEF2F7;

  /* ---------- Ink (text / neutral) ---------- */
  --k-ink-900: #0B1B33;
  --k-ink-800: #11243F;
  --k-ink-700: #233756;
  --k-ink-600: #3B4F70;
  --k-ink-500: #5C6E8A;
  --k-ink-400: #8092AE;
  --k-ink-300: #A8B4C8;
  --k-ink-200: #CBD3E1;
  --k-ink-100: #E3E8F0;
  --k-ink-050: #EFF2F7;

  /* ---------- Brand (navy) ---------- */
  --k-brand-900: #061A36;
  --k-brand-800: #0B2545;
  --k-brand-700: #133762;
  --k-brand-600: #1C4A82;
  --k-brand-500: #2E63A6;
  --k-brand-100: #E1EAF6;
  --k-brand-050: #EEF3FA;

  /* ---------- Accent (institutional gold — used sparingly) ---------- */
  --k-accent-700: #8A6A2B;
  --k-accent-500: #BFA15A;
  --k-accent-100: #F3ECDB;

  /* ---------- Status tokens ----------
     Each status ships as a triplet:
       bg  — badge background
       fg  — badge text
       dot — the 6px color dot, also used as bar/accent
  */

  /* Mottatt · info blue */
  --k-st-info-bg:  #E3EDFB;
  --k-st-info-fg:  #1C4A82;
  --k-st-info-dot: #2E63A6;

  /* Under vurdering · violet */
  --k-st-violet-bg:  #ECE7FA;
  --k-st-violet-fg:  #4B2E9E;
  --k-st-violet-dot: #6E55C8;

  /* Mangler dokumentasjon · amber */
  --k-st-amber-bg:  #FBEFD3;
  --k-st-amber-fg:  #7A4F0B;
  --k-st-amber-dot: #C58A1A;

  /* Mangler karakterer · orange */
  --k-st-orange-bg:  #FBE3CB;
  --k-st-orange-fg:  #7A3C0B;
  --k-st-orange-dot: #C26321;

  /* Klar til vurdering · teal */
  --k-st-teal-bg:  #D6F1EC;
  --k-st-teal-fg:  #0E5A52;
  --k-st-teal-dot: #1F8A7C;

  /* Tilbud sendt · tilbud blue-green */
  --k-st-tilbud-bg:  #DCEAEF;
  --k-st-tilbud-fg:  #0E4A66;
  --k-st-tilbud-dot: #1F6F95;

  /* Takket ja · success */
  --k-st-success-bg:  #D9EFDB;
  --k-st-success-fg:  #1B5E2A;
  --k-st-success-dot: #2F8A45;

  /* Takket nei · muted red */
  --k-st-rose-bg:  #F3DCDC;
  --k-st-rose-fg:  #8A2424;
  --k-st-rose-dot: #B23A3A;

  /* Venteliste · slate */
  --k-st-slate-bg:  #DEE3EC;
  --k-st-slate-fg:  #3B4F70;
  --k-st-slate-dot: #5C6E8A;

  /* Etter frist · rust */
  --k-st-rust-bg:  #F1DCC8;
  --k-st-rust-fg:  #7A3308;
  --k-st-rust-dot: #B0581C;

  /* Arkivert · gray (neutral) */
  --k-st-gray-bg:  #E3E8F0;
  --k-st-gray-fg:  #3B4F70;
  --k-st-gray-dot: #8092AE;

  /* ---------- Borders / lines ---------- */
  --k-border:        #E0E5EE;
  --k-border-strong: #CBD3E1;
  --k-border-soft:   #EAEEF5;

  /* ---------- Shadows ---------- */
  --k-shadow-1: 0 1px 0 rgba(11,27,51,.04), 0 1px 2px rgba(11,27,51,.04);
  --k-shadow-2: 0 1px 0 rgba(11,27,51,.04), 0 4px 14px rgba(11,27,51,.06);
  --k-shadow-3: 0 12px 40px rgba(11,27,51,.12);

  /* Focus ring used for keyboard accessibility */
  --k-ring: 0 0 0 3px var(--k-brand-050);
  --k-ring-strong: 0 0 0 3px rgba(46,99,166,.35);

  /* ---------- Radius ---------- */
  --k-r-xs:  4px;
  --k-r-sm:  6px;
  --k-r-md:  10px;
  --k-r-lg:  14px;
  --k-r-xl:  18px;
  --k-r-pill: 999px;

  /* ---------- Typography ---------- */
  --k-font-sans:  "Inter", "Söhne", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --k-font-serif: "Source Serif 4", "Source Serif Pro", Georgia,
                  "Times New Roman", serif;
  --k-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular,
                  Menlo, monospace;

  /* Sizes */
  --k-fs-display: 36px;
  --k-fs-h1:      28px;
  --k-fs-h2:      22px;
  --k-fs-h3:      18px;
  --k-fs-body:    14px;
  --k-fs-sm:      13px;
  --k-fs-xs:      12px;
  --k-fs-micro:   11px;

  /* Line-heights */
  --k-lh-tight:   1.1;
  --k-lh-snug:    1.3;
  --k-lh-normal:  1.5;
  --k-lh-relaxed: 1.65;

  /* Weights */
  --k-fw-regular: 400;
  --k-fw-medium:  500;
  --k-fw-semi:    600;
  --k-fw-bold:    700;

  /* ---------- Spacing scale ---------- */
  --k-s-1:  4px;
  --k-s-2:  8px;
  --k-s-3:  12px;
  --k-s-4:  16px;
  --k-s-5:  20px;
  --k-s-6:  24px;
  --k-s-7:  32px;
  --k-s-8:  40px;
  --k-s-9:  56px;
  --k-s-10: 72px;

  /* ---------- Layout ---------- */
  --k-sidebar-w:    248px;
  --k-header-h:     60px;
  --k-content-max:  1240px;

  /* ---------- Motion ---------- */
  --k-dur-fast:  120ms;
  --k-dur-base:  180ms;
  --k-dur-slow:  260ms;
  --k-ease:      cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   Primitive resets within the plugin shell only
   ========================================================= */
.kongshaug-admissions,
.kongshaug-admissions * {
  box-sizing: border-box;
}
.kongshaug-admissions {
  font-family: var(--k-font-sans);
  color: var(--k-ink-900);
  background: var(--k-bg-page);
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   Status badge generator — utility class helpers
   Usage: <span class="k-badge k-b-info"><i class="k-d"></i>Mottatt</span>
   ========================================================= */
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: var(--k-fw-semi);
  padding: 3px 9px 3px 8px;
  border-radius: var(--k-r-pill);
  line-height: 1.4;
  white-space: nowrap;
}
.k-badge .k-d { width: 6px; height: 6px; border-radius: 50%; }

.k-b-info    { background: var(--k-st-info-bg);    color: var(--k-st-info-fg); }
.k-b-info    .k-d { background: var(--k-st-info-dot); }
.k-b-violet  { background: var(--k-st-violet-bg);  color: var(--k-st-violet-fg); }
.k-b-violet  .k-d { background: var(--k-st-violet-dot); }
.k-b-amber   { background: var(--k-st-amber-bg);   color: var(--k-st-amber-fg); }
.k-b-amber   .k-d { background: var(--k-st-amber-dot); }
.k-b-orange  { background: var(--k-st-orange-bg);  color: var(--k-st-orange-fg); }
.k-b-orange  .k-d { background: var(--k-st-orange-dot); }
.k-b-teal    { background: var(--k-st-teal-bg);    color: var(--k-st-teal-fg); }
.k-b-teal    .k-d { background: var(--k-st-teal-dot); }
.k-b-tilbud  { background: var(--k-st-tilbud-bg);  color: var(--k-st-tilbud-fg); }
.k-b-tilbud  .k-d { background: var(--k-st-tilbud-dot); }
.k-b-success { background: var(--k-st-success-bg); color: var(--k-st-success-fg); }
.k-b-success .k-d { background: var(--k-st-success-dot); }
.k-b-rose    { background: var(--k-st-rose-bg);    color: var(--k-st-rose-fg); }
.k-b-rose    .k-d { background: var(--k-st-rose-dot); }
.k-b-slate   { background: var(--k-st-slate-bg);   color: var(--k-st-slate-fg); }
.k-b-slate   .k-d { background: var(--k-st-slate-dot); }
.k-b-rust    { background: var(--k-st-rust-bg);    color: var(--k-st-rust-fg); }
.k-b-rust    .k-d { background: var(--k-st-rust-dot); }
.k-b-gray    { background: var(--k-st-gray-bg);    color: var(--k-st-gray-fg); }
.k-b-gray    .k-d { background: var(--k-st-gray-dot); }