/* ==========================================================================
   CoWorkPlus Holbæk — designtokens
   Paletten er hentet fra logoet: marineblå tekst, turkis laptopskærm,
   og den varme amber er kaffekoppen. 2026.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --ink:            #101B33;   /* dyb marineblå — logoets tekst */
  --ink-soft:       #1D2B4A;
  --primary:        #17788F;   /* turkis — laptopskærmen */
  --primary-dark:   #115C6E;
  --primary-soft:   #E4F1F4;
  --accent:         #C9863F;   /* varm amber — kaffekoppen */
  --accent-dark:    #A66A2B;
  --accent-soft:    #FBF1E4;

  /* --- Flader ----------------------------------------------------------- */
  --bg:             #FFFFFF;
  --sand:           #F7F4EF;   /* varm off-white sektionsflade */
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --border:         #E7E2D9;
  --border-strong:  #D3CCBF;

  /* --- Tekst ------------------------------------------------------------ */
  --text:           #1B2233;
  --muted:          #6B6862;   /* varm grå */
  --on-dark:        #F6F4F0;
  --on-dark-muted:  #A9B4C6;

  /* --- Typografi -------------------------------------------------------- */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.45rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.25rem);
  --step-5:  clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

  /* --- Rytme ------------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 7.5rem);

  --container: 1180px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(16, 27, 51, .05);
  --shadow:    0 2px 4px rgba(16, 27, 51, .04), 0 12px 28px -14px rgba(16, 27, 51, .22);
  --shadow-lg: 0 4px 8px rgba(16, 27, 51, .05), 0 28px 56px -24px rgba(16, 27, 51, .30);

  --transition: 180ms cubic-bezier(.2, .6, .3, 1);
  --header-h: 76px;
}

/* --- Mørk visning -------------------------------------------------------
   Aktiveres af systemets indstilling. Kun tokens redefineres, så alle
   komponenter følger med af sig selv.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #0D1424;
    --sand:           #121A2C;
    --surface:        #162034;
    --surface-raised: #172136;
    --border:         #26314A;
    --border-strong:  #35425F;
    --text:           #E8EAF0;
    --muted:          #9AA3B4;
    --primary:        #4FB3C9;
    --primary-dark:   #7ACBDD;
    --primary-soft:   #14313A;
    --accent:         #E0A55E;
    --accent-dark:    #EFC08A;
    --accent-soft:    #2E2317;
    --ink:            #0A0F1C;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow:    0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 28px 56px -24px rgba(0, 0, 0, .7);
  }
}

/* --- Grundlag ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--header-h);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
@media (prefers-color-scheme: dark) { h1, h2, h3, h4 { color: var(--text); } }

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

/* Overskrifter får luft ned til den følgende tekst, uanset hvor de står. */
:where(h1, h2, h3, h4) + p,
:where(h1, h2, h3, h4) + ul,
:where(h1, h2, h3, h4) + ol,
:where(h1, h2, h3, h4) + address { margin-top: var(--space-sm); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* Synligt fokus overalt — kun ved tastaturbrug. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }