/* =========================================================================
   Designsystem "Arbejdsuge"
   Tegnebordet som forlaeg: linjerede poster, en tidsrygrad i mono-skrift,
   og en dæmpet petrol/rav-palet. Ingen kort hvor en streg gør arbejdet.
   ========================================================================= */

/* --- Skrifter, self-hostet (ingen tredjeparts-CDN) --------------------- */

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/assets/fonts/familjen-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/assets/fonts/familjen-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Lys palet (standard) --------------------------------------------- */

:root {
  color-scheme: light;

  --paper:        #f1f2ee;
  --surface:      #ffffff;
  --surface-2:    #f8f9f6;
  --surface-sunk: #eceee8;

  --ink:          #1a2126;
  --ink-2:        #4b5761;
  --ink-3:        #7d8891;
  --ink-on-brand: #ffffff;

  --rule:         #dcdfd8;
  --rule-strong:  #c3c8be;

  --brand:        #0f6e6c;
  --brand-ink:    #0a5250;
  --brand-wash:   #e2efee;
  --brand-edge:   #9ec9c6;

  --amber:        #b87514;
  --amber-wash:   #fbf0dc;
  --amber-edge:   #e6c98c;

  --critical:     #a93520;
  --critical-wash:#fae7e2;
  --critical-edge:#e4b0a4;

  --moss:         #4a7a3c;
  --moss-wash:    #e8f0e3;
  --moss-edge:    #b0ce9f;

  --violet:       #6b4a9e;
  --violet-wash:  #eee8f7;

  --shadow-1: 0 1px 2px rgb(26 33 38 / .06), 0 1px 1px rgb(26 33 38 / .04);
  --shadow-2: 0 4px 14px rgb(26 33 38 / .10), 0 1px 3px rgb(26 33 38 / .06);
  --shadow-drag: 0 12px 28px rgb(26 33 38 / .18), 0 2px 6px rgb(26 33 38 / .10);
  --shadow-panel: -18px 0 44px rgb(26 33 38 / .14);

  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
}

/* --- Mørk palet ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --paper:        #12171a;
    --surface:      #191f23;
    --surface-2:    #1f262b;
    --surface-sunk: #0e1315;

    --ink:          #e6e9e4;
    --ink-2:        #a3aeb4;
    --ink-3:        #78848b;
    --ink-on-brand: #04201f;

    --rule:         #2a3238;
    --rule-strong:  #3d474e;

    --brand:        #48b3aa;
    --brand-ink:    #6accc3;
    --brand-wash:   #123230;
    --brand-edge:   #2b6b66;

    --amber:        #dfa24a;
    --amber-wash:   #33270f;
    --amber-edge:   #6d5527;

    --critical:     #e0715a;
    --critical-wash:#381913;
    --critical-edge:#7a3527;

    --moss:         #7db36b;
    --moss-wash:    #1c2a18;
    --moss-edge:    #3d5c33;

    --violet:       #a78bda;
    --violet-wash:  #241c33;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .40);
    --shadow-2: 0 4px 16px rgb(0 0 0 / .48), 0 1px 3px rgb(0 0 0 / .30);
    --shadow-drag: 0 14px 32px rgb(0 0 0 / .60), 0 2px 6px rgb(0 0 0 / .40);
    --shadow-panel: -18px 0 48px rgb(0 0 0 / .50);
  }
}

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

  --paper:        #12171a;
  --surface:      #191f23;
  --surface-2:    #1f262b;
  --surface-sunk: #0e1315;

  --ink:          #e6e9e4;
  --ink-2:        #a3aeb4;
  --ink-3:        #78848b;
  --ink-on-brand: #04201f;

  --rule:         #2a3238;
  --rule-strong:  #3d474e;

  --brand:        #48b3aa;
  --brand-ink:    #6accc3;
  --brand-wash:   #123230;
  --brand-edge:   #2b6b66;

  --amber:        #dfa24a;
  --amber-wash:   #33270f;
  --amber-edge:   #6d5527;

  --critical:     #e0715a;
  --critical-wash:#381913;
  --critical-edge:#7a3527;

  --moss:         #7db36b;
  --moss-wash:    #1c2a18;
  --moss-edge:    #3d5c33;

  --violet:       #a78bda;
  --violet-wash:  #241c33;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .40);
  --shadow-2: 0 4px 16px rgb(0 0 0 / .48), 0 1px 3px rgb(0 0 0 / .30);
  --shadow-drag: 0 14px 32px rgb(0 0 0 / .60), 0 2px 6px rgb(0 0 0 / .40);
  --shadow-panel: -18px 0 48px rgb(0 0 0 / .50);
}

/* --- Skrift, rytme og mål --------------------------------------------- */

:root {
  --font-display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  --t-xs:   0.6875rem;  /* 11px  - rygradens etiketter */
  --t-sm:   0.8125rem;  /* 13px  - metadata */
  --t-base: 0.9063rem;  /* 14.5px - grundtekst i UI */
  --t-md:   1rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  --t-3xl:  2.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s7: 2rem;    --s8: 2.5rem;
  --s9: 3rem;    --s10: 4rem;

  --r-xs: 3px; --r-sm: 5px; --r: 9px; --r-lg: 14px; --r-pill: 999px;

  --topbar-h:   56px;
  --sidebar-w:  266px;
  --spine-w:    46px;
  --content-max: 1180px;

  --ease:      cubic-bezier(.2, .7, .3, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       180ms;
  --dur-slow:  320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; --dur-slow: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}