/* ==========================================================================
   Neubert Work · Design tokens
   Ét sted for farver, typografi, rum, radier, skygger og bevægelse.

   Paletten er den samme som på strikke.neubert.work, med vilje: forsiden og
   de sider, den peger på, skal føles som ét sted. Værdierne stammer fra den
   validering, der er beskrevet i docs/DESIGN.md.

   Mørk tilstand er *valgt*, ikke vendt automatisk: hver rolle har sin egen
   værdi i mørk tilstand. Temaknappen vinder over OS-indstillingen.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Flader ----------------------------------------------------------- */
  --surface-page:    #f2ede8;   /* siden bag kortene (varmt papir) */
  --surface-card:    #fbf9f7;   /* kortflade — paletten er valideret mod denne */
  --surface-sunken:  #ece5de;   /* nedsænkede felter, tracks, inputs i kort */
  --surface-raised:  #ffffff;   /* popovers, dialoger */
  --surface-overlay: rgba(28, 25, 23, .48);

  /* --- Blæk ------------------------------------------------------------- */
  --ink:    #1c1917;
  --ink-2:  #57534e;
  --ink-3:  #857b73;

  /* --- Kanter ----------------------------------------------------------- */
  --line:        #e4dcd4;
  --line-strong: #d3c8bd;

  /* --- Brand (kategorisk slot 7 · violet) ------------------------------- */
  --brand:        #4a3aa7;
  --brand-hover:  #3d2f8c;
  --brand-active: #332777;
  --brand-on:     #ffffff;       /* tekst oven på brand */
  --brand-soft:   #ece9f9;       /* tonet flade */
  --brand-softer: #f5f3fc;
  --brand-line:   #cec7ef;
  --brand-ring:   rgba(74, 58, 167, .32);
  /* Markeret tekst. Egen farve, ikke --brand-soft: den tonede flade er
     valgt til at være diskret, og en markering man ikke kan se, er
     ingen markering. Målt mod fladen og mod blækket ovenpå. */
  --selection:    #cdc2f2;

  /* --- Kategorifarver (samme validerede sæt som strikkesiden) ----------- */
  --accent:       #1baf7a;       /* slot 3 aqua   · "i drift", live tjenester */
  --accent-soft:  #e2f5ee;
  --accent-line:  #b6e3d2;
  --accent-on:    #0e0d10;       /* blækket følger fyldets lyshed, ikke temaet */
  --ember:        #eb6834;       /* slot 2 orange · planlagt, endnu ikke bygget */
  --ember-soft:   #fdeee7;
  --ember-line:   #f7cdb9;
  --ember-on:     #0e0d10;

  /* --- Status (fast palet — aldrig tematiseret) ------------------------- */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-soft:     #e6f6e6;
  --warning-soft:  #fef4e0;
  --serious-soft:  #fdefe9;
  --critical-soft: #fbeaea;
  --good-ink:     #0a6b0a;       /* tekstvarianter der klarer 4.5:1 */
  --warning-ink:  #7a5200;
  --critical-ink: #a32a2a;

  /* --- Typografi -------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   .75rem;
  --text-sm:   .8125rem;
  --text-base: .9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  /* --- Rum -------------------------------------------------------------- */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;

  /* --- Radier ----------------------------------------------------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* --- Skygger ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06),
               0 1px 3px rgba(28, 25, 23, .05);
  --shadow-md: 0 2px 4px rgba(28, 25, 23, .05),
               0 6px 16px rgba(28, 25, 23, .08);
  --shadow-lg: 0 8px 20px rgba(28, 25, 23, .10),
               0 24px 48px rgba(28, 25, 23, .12);

  /* --- Bevægelse -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* --- Layout ----------------------------------------------------------- */
  --app-width: 72rem;   /* forsiden er et gitter, ikke en spalte tekst */
  --gutter: 1rem;
}

/* Mørke værdier defineres i begge scopes:
   media-blokken dækker OS-indstillingen, [data-theme] dækker temaknappen.
   :not()-vagten lader et lyst valg slå OS-mørk; :where() holder
   media-blokken under knap-scopet i specificitet. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-page:    #100f13;
    --surface-card:    #17151a;
    --surface-sunken:  #201d26;
    --surface-raised:  #221f29;
    --surface-overlay: rgba(5, 4, 8, .66);

    --ink:   #f4f2f7;
    --ink-2: #b9b3c2;
    --ink-3: #8b8493;

    --line:        #2e2a36;
    --line-strong: #413b4d;

    --brand:        #9085e9;
    --brand-hover:  #a49bef;
    --brand-active: #b5aef3;
    --brand-on:     #16121f;
    --brand-soft:   #241f36;
    --brand-softer: #1d1a2a;
    --brand-line:   #3b3358;
    --brand-ring:   rgba(144, 133, 233, .38);
    --selection:    #554a8a;

    --accent:       #199e70;
    --accent-soft:  #12281f;
    --accent-line:  #1d4636;
    --accent-on:    #0e0d10;
    --ember:        #d95926;
    --ember-soft:   #2c1a12;
    --ember-line:   #4d2c1c;
    --ember-on:     #0e0d10;

    --good-soft:     #11250f;
    --warning-soft:  #2b2109;
    --serious-soft:  #2a1a12;
    --critical-soft: #2b1313;
    --good-ink:     #5fd35f;
    --warning-ink:  #fab219;
    --critical-ink: #f28a8a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .44), 0 10px 24px rgba(0, 0, 0, .38);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, .50), 0 30px 60px rgba(0, 0, 0, .44);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:    #100f13;
  --surface-card:    #17151a;
  --surface-sunken:  #201d26;
  --surface-raised:  #221f29;
  --surface-overlay: rgba(5, 4, 8, .66);

  --ink:   #f4f2f7;
  --ink-2: #b9b3c2;
  --ink-3: #8b8493;

  --line:        #2e2a36;
  --line-strong: #413b4d;

  --brand:        #9085e9;
  --brand-hover:  #a49bef;
  --brand-active: #b5aef3;
  --brand-on:     #16121f;
  --brand-soft:   #241f36;
  --brand-softer: #1d1a2a;
  --brand-line:   #3b3358;
  --brand-ring:   rgba(144, 133, 233, .38);
  --selection:    #554a8a;

  --accent:       #199e70;
  --accent-soft:  #12281f;
  --accent-line:  #1d4636;
  --accent-on:    #0e0d10;
  --ember:        #d95926;
  --ember-soft:   #2c1a12;
  --ember-line:   #4d2c1c;
  --ember-on:     #0e0d10;

  --good-soft:     #11250f;
  --warning-soft:  #2b2109;
  --serious-soft:  #2a1a12;
  --critical-soft: #2b1313;
  --good-ink:     #5fd35f;
  --warning-ink:  #fab219;
  --critical-ink: #f28a8a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .44), 0 10px 24px rgba(0, 0, 0, .38);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, .50), 0 30px 60px rgba(0, 0, 0, .44);
}