/*
 * EDS Desktop Design Tokens — Light Theme
 * Source: https://eds-ued.github.io/eds-desktop/
 * Mapped to concrete values for static HTML pages.
 */

:root {
  /* ── Brand ── */
  --eds-brand:        #006d41;
  --eds-brand-hover:  #005a36;
  --eds-brand-light:  #e6f3ee;
  --eds-brand-weaken: rgba(0, 109, 65, 0.12);

  /* ── Surface ── */
  --eds-face:         #ffffff;
  --eds-page:         #ffffff;
  --eds-menu:         #fafafa;
  --eds-container:    #e6e7e8;
  --eds-data-table:   #f4f5f6;
  --eds-flotation:    #e2e4e6;

  /* ── Text ── */
  --eds-base:         #020304;
  --text-primary:     #020304;
  --text-secondary:   rgba(2, 3, 4, 0.6);
  --text-tertiary:    rgba(2, 3, 4, 0.4);
  --text-quaternary:  rgba(2, 3, 4, 0.2);
  --text-white-primary:   #ffffff;
  --text-white-secondary: rgba(255, 255, 255, 0.6);

  /* ── Status ── */
  --eds-danger:       #d7462d;
  --eds-danger-light: rgba(215, 70, 45, 0.12);
  --eds-success:      #1fc35a;
  --eds-success-light:rgba(31, 195, 90, 0.12);
  --eds-warning:      #eb9114;
  --eds-warning-light:rgba(235, 145, 20, 0.12);
  --eds-info:         #006d41;
  --eds-info-light:   rgba(0, 109, 65, 0.08);

  /* ── Stroke / Border ── */
  --stroke-primary:   #020304;
  --stroke-secondary: rgba(2, 3, 4, 0.6);
  --stroke-tertiary:  rgba(2, 3, 4, 0.4);
  --stroke-quaternary:rgba(2, 3, 4, 0.2);
  --stroke-divider:   rgba(2, 3, 4, 0.06);
  --stroke-outline:   rgba(2, 3, 4, 0.12);
  --stroke-module:    #ebeced;

  /* ── Spacing (4px base) ── */
  --sp-0:  0;
  --sp-05: 2px;
  --sp-1:  4px;
  --sp-15: 6px;
  --sp-2:  8px;
  --sp-25: 10px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ── Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ── Typography ── */
  --font-sans: "EDS Text", "PingFang SC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-4xl: 40px;
  --text-3xl: 25px;
  --text-2xl: 21px;
  --text-xl:  17px;
  --text-lg:  15px;
  --text-md:  13px;
  --text-sm:  12px;
  --text-xs:  11px;

  --lh-4xl: 48px;
  --lh-3xl: 32px;
  --lh-2xl: 28px;
  --lh-xl:  24px;
  --lh-lg:  22px;
  --lh-md:  18px;
  --lh-sm:  16px;
  --lh-xs:  14px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ── Shadows ── */
  --shadow-subtle: 0 0 0 0.5px rgba(2,3,4,0.06), 0 6px 12px 0 rgba(2,3,4,0.03);
  --shadow-light:  0 0 0 0.5px rgba(2,3,4,0.12), 0 8px 24px 0 rgba(2,3,4,0.06);
  --shadow-deep:   0 0 0 0.5px rgba(2,3,4,0.18), 0 16px 48px 0 rgba(2,3,4,0.12);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
}

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

html {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--text-primary);
  background: var(--eds-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body {
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--eds-page);
}

a { color: var(--eds-brand); text-decoration: none; }
a:hover { color: var(--eds-brand-hover); }

code, pre { font-family: var(--font-mono); }