/* ——— @font-face: self-hosted Inter (uploaded .woff2) ———
 * Inter = UI / body text. Inter Display = large display headings (optical size).
 * Full 100–900 range, upright + italic. Replaces the previous Google Fonts CDN load.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-BlackItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/InterDisplay-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/InterDisplay-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraLightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/InterDisplay-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/InterDisplay-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InterDisplay-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InterDisplay-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InterDisplay-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InterDisplay-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InterDisplay-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/InterDisplay-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/InterDisplay-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/InterDisplay-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/InterDisplay-BlackItalic.woff2") format("woff2");
}

/* Ansökshjälpen — Design Tokens
 * Source: frontend/app/globals.css + theme context
 * Light-first (the product ships with a light default; dark mode applies via prefers-color-scheme)
 */

:root {
  /* ——— Brand ——— */
  --brand-primary: #004876;          /* LIDOL-blå — CTA + links (white-on = 9.60 AAA) */
  --brand-primary-hover: #003a5f;
  --brand-primary-on-surface: #004876; /* same as primary in light mode */
  --brand-secondary: #a8cee6;        /* Light LIDOL tint — received bubbles, accents (dark text: 11.36 AAA) */
  --brand-logo-bg: #004876;          /* LIDOL-blå logo square (recreated assets) */

  /* ——— Surfaces ——— */
  --bg: #f9f9f9;                     /* page */
  --bg-card: #ffffff;                /* cards, popovers */
  --bg-muted: oklch(0.97 0 0);       /* subtle fills */
  --bg-footer: #0f172a;              /* deep slate, full-bleed footer */

  /* ——— Text ——— */
  --fg: #111111;                     /* body text, headings */
  --fg-muted: rgb(50, 50, 57);       /* secondary text */
  --fg-muted-2: rgb(75, 75, 89);     /* tertiary */
  --fg-on-primary: #fefefe;          /* text on blue */

  /* ——— Semantic ——— */
  --success: #0dbd24;
  --destructive: oklch(0.577 0.245 27.325);
  --warning: #f59e0b;

  /* ——— Lines ——— */
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0 0 238);

  /* ——— Radii ——— */
  --radius-sm: 0.375rem;   /* 6px — inputs, badges */
  --radius: 0.625rem;      /* 10px — buttons, cards (shadcn default) */
  --radius-lg: 0.75rem;    /* 12px — large cards */
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ——— Shadows ——— */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);

  /* ——— Spacing scale (Tailwind-aligned) ——— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-20: 5rem;

  /* ——— Type ——— */
  --font-sans: "Inter", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", Arial, sans-serif; /* large headings — optical-size cut */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Semantic type tokens (matches globals.css clamp() rules) */
  --h1-size: clamp(1.8rem, 5vw, 3rem);
  --h1-weight: 800;
  --h1-lh: 1.2;   /* @kind other */
  --h2-size: clamp(1.2rem, 3vw, 1.75rem);
  --h2-weight: 700;
  --h2-lh: 1.3;   /* @kind other */
  --h3-size: clamp(1rem, 2.5vw, 1.5rem);
  --h3-weight: 600;
  --h3-lh: 1.4;   /* @kind other */
  --h4-size: clamp(0.9rem, 2vw, 1.2rem);
  --h4-weight: 500;
  --h4-lh: 1.4;   /* @kind other */
  --p-size: 0.875rem;
  --p-lh: 1.6;   /* @kind other */

  /* Accessibility constants (per globals.css) */
  --min-target: 44px;  /* All a, button have min-height/width 44px */
}

/* ——— Dark mode ———
 * Two ways to activate:
 *   1. System: @media (prefers-color-scheme: dark) — auto
 *   2. Explicit: <html data-theme="dark"> — overrides system
 * Toggle sets `data-theme` on <html> + persists to localStorage('theme').
 */
.dark-tokens, :root[data-theme="dark"] {
  --bg: #121212;                /* page */
  --bg-card: #1a1a1a;           /* cards, popovers, nav */
  --bg-muted: #262626;           /* subtle fills, segmented control */
  --bg-footer: #0a0a0a;          /* even darker footer */

  --fg: #f2f2f2;
  --fg-muted: rgb(190, 190, 195);
  --fg-muted-2: rgb(140, 140, 150);
  --fg-on-primary: #fefefe;

  /* Dark mode uses two LIDOL tints: a mid fill so white text on primary
   * buttons hits AA (white on #1a6a9e = 5.83), and a lighter on-surface
   * tone for link text on the dark canvas (#5cb3e6 on #121212 = 8.07 AAA). */
  --brand-primary: #1a6a9e;         /* button fill, white text passes AA */
  --brand-primary-hover: #2680b8;
  --brand-primary-on-surface: #5cb3e6; /* link/accent text on dark bg */
  --brand-secondary: #1e3a5f;       /* deep navy — received bubbles on dark (fg text: 10.27 AAA) */

  --border: rgba(255, 255, 255, 0.10);
  --input:  rgba(255, 255, 255, 0.14);
  --ring:   #5cb3e6;

  /* Shadows carry less in dark — make them deeper-but-subtle */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ——— System dark mode (auto) ———
 * When the OS prefers dark and the user hasn't explicitly chosen a theme,
 * these apply. An explicit <html data-theme="light"> override is re-asserted
 * below so it always wins over the system preference. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg-card: #1a1a1a;
    --bg-muted: #262626;
    --bg-footer: #0a0a0a;

    --fg: #f2f2f2;
    --fg-muted: rgb(190, 190, 195);
    --fg-muted-2: rgb(140, 140, 150);

    --brand-primary: #1a6a9e;
    --brand-primary-hover: #2680b8;
    --brand-primary-on-surface: #5cb3e6;
    --brand-secondary: #1e3a5f;

    --border: rgba(255, 255, 255, 0.10);
    --input:  rgba(255, 255, 255, 0.14);
    --ring:   #5cb3e6;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }

  /* Explicit light choice beats system-dark (higher specificity + later) */
  :root[data-theme="light"] {
    --bg: #f9f9f9;
    --bg-card: #ffffff;
    --bg-muted: oklch(0.97 0 0);
    --bg-footer: #0f172a;

    --fg: #111111;
    --fg-muted: rgb(50, 50, 57);
    --fg-muted-2: rgb(75, 75, 89);

    --brand-primary: #004876;
    --brand-primary-hover: #003a5f;
    --brand-primary-on-surface: #004876;
    --brand-secondary: #a8cee6;

    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0 0 238);

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
  }
}

/* ——— Semantic element styles ——— */
body, h1, h2, h3, h4, p { font-family: var(--font-sans); }
body { background: var(--bg); color: var(--fg); margin: 0; }

h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); margin: 0; }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); margin: 0; }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); margin: 0; }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); margin: 0; }
p  { font-size: var(--p-size);  line-height: var(--p-lh); color: var(--fg-muted); margin: 0; }

code, pre { font-family: var(--font-mono); font-size: 0.875rem; }
code { background: var(--bg-muted); padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); }

/* ——— Focus visibility (WCAG 2.4.7) ———
 * Applies to all interactive elements. We use :focus-visible so the ring
 * only appears on keyboard navigation, not on mouse clicks. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* High-contrast media query — honor prefers-contrast: more */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(0, 0, 0, 0.3);
    --fg-muted: #2a2a2a;
  }
  :root[data-theme="dark"] {
    --border: rgba(255, 255, 255, 0.4);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --border: rgba(255, 255, 255, 0.4);
  }
  :root[data-theme="light"] {
    --border: rgba(0, 0, 0, 0.3);
  }
}

/* Reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}