/* ============================================================
   ASCENDUM — Design Tokens (Production)
   Re-launch 2026 · GovTech / Öffentliche Vergabe
   Accent: "Wachstum · Teal"  ·  Headings: "Grotesk · Schibsted"
   ------------------------------------------------------------
   Single source of truth. These are the FINAL, chosen values —
   the multi-theme switching from the prototype has been resolved
   down to the selected direction. Map these into your framework's
   token system (Tailwind theme, CSS vars, design-tokens JSON, etc).
   ============================================================ */

:root {
  /* ---- Primary · Ink Navy (brand anchor) ---- */
  --navy-950: #080F1C;
  --navy-900: #0C1626;  /* primary surface-inverse, footer, hero */
  --navy-800: #122036;
  --navy-700: #1B2F4D;
  --navy-600: #284465;
  --navy-500: #38597F;

  /* ---- Secondary / Accent · Wachstum Teal ---- */
  --accent:        #0E9E8E;  /* primary actions, links, active states */
  --accent-strong: #097567;  /* hover, accent text on light */
  --accent-soft:   #DDF3EF;  /* tinted backgrounds, badges, icon chips */
  --accent-tint:   #F1FAF8;  /* very subtle wash */
  --accent-fg:     #FFFFFF;  /* text/icon on accent fill */
  --accent-ring:   rgba(14, 158, 142, 0.30); /* focus ring */

  /* ---- Neutrals · Cool Grey (subtly blue-toned) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8F9FB;
  --neutral-100: #F0F2F6;
  --neutral-150: #E8EBF0;
  --neutral-200: #DFE3EA;
  --neutral-300: #C9D0DB;
  --neutral-400: #A4AEBE;
  --neutral-500: #7A8597;
  --neutral-600: #586375;
  --neutral-700: #3D4757;
  --neutral-800: #28313F;
  --neutral-900: #161D28;

  /* ---- Semantic surfaces & text ---- */
  --surface:         var(--neutral-0);
  --surface-subtle:  var(--neutral-50);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--navy-900);
  --border:          var(--neutral-200);
  --border-strong:   var(--neutral-300);

  --text-strong:        var(--navy-900);
  --text:               var(--neutral-800);
  --text-muted:         var(--neutral-600);
  --text-subtle:        var(--neutral-500);
  --text-on-dark:       #E9EDF4;
  --text-on-dark-muted: #9AA6BA;

  /* ---- Status ---- */
  --success:      #14855E;  --success-soft: #E2F3EC;  --success-fg: #0A4D37;
  --warning:      #B5740E;  --warning-soft: #FBF0DC;  --warning-fg: #6E4604;
  --danger:       #C23B36;  --danger-soft:  #FBE7E6;  --danger-fg:  #7C211D;
  /* "Info" is a neutral informational blue — distinct from the brand accent teal,
     used for hint boxes / status chips that read as "FYI" rather than "primary action". */
  --info:         #2563EB;  --info-soft:    #EFF6FF;  --info-fg:    #1D4ED8;
  --purple:       #7C3AED;  --purple-soft:  #EDE9FE;  --purple-fg:  #5B21B6;

  /* ---- Theme (native form controls, scrollbars) ---- */
  color-scheme: light;

  /* ---- Typography ---- */
  /* Headings: Schibsted Grotesk · Body: Public Sans · Mono: IBM Plex Mono */
  --font-head: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --head-weight: 700;
  --head-tracking: -0.015em;
  --label-tracking: 0.08em;

  /* Type scale — 1.22 ratio */
  --text-display: 4rem;     /* 64px */
  --text-h1:      3rem;     /* 48px */
  --text-h2:      2.25rem;  /* 36px */
  --text-h3:      1.625rem; /* 26px */
  --text-h4:      1.25rem;  /* 20px */
  --text-lg:      1.125rem; /* 18px */
  --text-base:    1rem;     /* 16px */
  --text-sm:      0.875rem; /* 14px */
  --text-xs:      0.75rem;  /* 12px */

  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation (cool-tinted, restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(12, 22, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(12, 22, 38, 0.08), 0 1px 2px rgba(12, 22, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 22, 38, 0.08), 0 2px 4px rgba(12, 22, 38, 0.04);
  --shadow-lg: 0 12px 32px rgba(12, 22, 38, 0.12), 0 4px 8px rgba(12, 22, 38, 0.05);
  --shadow-focus: 0 0 0 3px var(--accent-ring);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.22s;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 860px;
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   Semantic surface/text/status tokens only — the raw brand
   scales (--navy-*, --neutral-*) and the accent hue stay fixed;
   only their *role* assignments change. Applies automatically
   with the OS preference ("auto"), or is pinned explicitly via
   data-theme="dark" / "light" on <html> (see base.html + the
   theme toggle in Einstellungen). Both blocks below must stay
   in sync — the media query drives "auto", the attribute lets
   an explicit choice win over the OS in either direction.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:         #101A2B;
    --surface-subtle:  #0A1220;
    --surface-sunken:  #0D1626;
    --surface-inverse: var(--neutral-0);
    --border:          rgba(233, 237, 244, 0.10);
    --border-strong:   rgba(233, 237, 244, 0.18);

    --text-strong: #F1F4F9;
    --text:        #C9D2E0;
    --text-muted:  #93A0B4;
    --text-subtle: #6E7B90;

    --accent-strong: #4FD1C0;
    --accent-soft:   rgba(14, 158, 142, 0.18);
    --accent-tint:   rgba(14, 158, 142, 0.08);
    --accent-ring:   rgba(79, 209, 192, 0.35);

    --success:      #34D399; --success-soft: rgba(52, 211, 153, 0.16); --success-fg: #86EFAC;
    --warning:      #F5A524; --warning-soft: rgba(245, 165, 36, 0.16); --warning-fg: #FCD34D;
    --danger:       #F87171; --danger-soft:  rgba(248, 113, 113, 0.16); --danger-fg: #FCA5A5;
    --info:         #60A5FA; --info-soft:    rgba(96, 165, 250, 0.16); --info-fg:   #93C5FD;
    --purple:       #A78BFA; --purple-soft:  rgba(167, 139, 250, 0.18); --purple-fg: #D8CCFB;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48), 0 4px 8px rgba(0, 0, 0, 0.28);

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface:         #101A2B;
  --surface-subtle:  #0A1220;
  --surface-sunken:  #0D1626;
  --surface-inverse: var(--neutral-0);
  --border:          rgba(233, 237, 244, 0.10);
  --border-strong:   rgba(233, 237, 244, 0.18);

  --text-strong: #F1F4F9;
  --text:        #C9D2E0;
  --text-muted:  #93A0B4;
  --text-subtle: #6E7B90;

  --accent-strong: #4FD1C0;
  --accent-soft:   rgba(14, 158, 142, 0.18);
  --accent-tint:   rgba(14, 158, 142, 0.08);
  --accent-ring:   rgba(79, 209, 192, 0.35);

  --success:      #34D399; --success-soft: rgba(52, 211, 153, 0.16); --success-fg: #86EFAC;
  --warning:      #F5A524; --warning-soft: rgba(245, 165, 36, 0.16); --warning-fg: #FCD34D;
  --danger:       #F87171; --danger-soft:  rgba(248, 113, 113, 0.16); --danger-fg: #FCA5A5;
  --info:         #60A5FA; --info-soft:    rgba(96, 165, 250, 0.16); --info-fg:   #93C5FD;
  --purple:       #A78BFA; --purple-soft:  rgba(167, 139, 250, 0.18); --purple-fg: #D8CCFB;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48), 0 4px 8px rgba(0, 0, 0, 0.28);

  color-scheme: dark;
}