/* PPMOS Theme — design tokens (Rijksoverheid-stijl)
   Sober, functional, government-document aesthetic.
   Modeled on belastingdienst.nl / amsterdam.nl / overheid.nl typographic conventions.
*/

.ppmos-theme {
  /* ── Color primitives ─────────────────────────────────────────── */
  --ppmos-color-blue-05: #e6eef7;
  --ppmos-color-blue-10: #c4d4ea;
  --ppmos-color-blue-20: #8fb0d6;
  --ppmos-color-blue-40: #316ab9;   /* link blue (rijksstijl) */
  --ppmos-color-blue-60: #154273;   /* primary brand — rijkshuisstijl-style hemelblauw */
  --ppmos-color-blue-70: #0b3263;
  --ppmos-color-blue-80: #082554;

  --ppmos-color-gray-00: #ffffff;
  --ppmos-color-gray-02: #f3f3f3;
  --ppmos-color-gray-05: #ebebeb;
  --ppmos-color-gray-10: #d8d8d8;
  --ppmos-color-gray-20: #b4b4b4;
  --ppmos-color-gray-40: #757575;
  --ppmos-color-gray-60: #535353;
  --ppmos-color-gray-80: #2c2c2c;
  --ppmos-color-gray-90: #000000;

  --ppmos-color-orange-60: #c9531c;
  --ppmos-color-green-60:  #2e7d32;
  --ppmos-color-red-60:    #b3261e;

  /* ── Document ─────────────────────────────────────────────────── */
  --utrecht-document-background-color: var(--ppmos-color-gray-00);
  --utrecht-document-color: var(--ppmos-color-gray-90);
  --utrecht-document-font-family: "Source Sans 3", "RijksoverheidSans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --utrecht-document-font-size: 1rem;
  --utrecht-document-line-height: 1.5;

  --ppmos-mono-font-family: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Headings ─────────────────────────────────────────────────── */
  --utrecht-heading-color: var(--ppmos-color-blue-60);
  --utrecht-heading-font-family: var(--utrecht-document-font-family);
  --utrecht-heading-font-weight: 700;
  --utrecht-heading-letter-spacing: -0.005em;

  --utrecht-heading-1-font-size: 2.5rem;
  --utrecht-heading-1-line-height: 1.15;
  --utrecht-heading-2-font-size: 1.5rem;
  --utrecht-heading-2-line-height: 1.25;
  --utrecht-heading-3-font-size: 1.125rem;
  --utrecht-heading-3-line-height: 1.3;
  --utrecht-heading-4-font-size: 1rem;
  --utrecht-heading-4-line-height: 1.4;

  /* ── Paragraph ───────────────────────────────────────────────── */
  --utrecht-paragraph-color: var(--ppmos-color-gray-90);
  --utrecht-paragraph-lead-font-size: 1.125rem;
  --utrecht-paragraph-lead-line-height: 1.55;

  /* ── Link ────────────────────────────────────────────────────── */
  --utrecht-link-color: var(--ppmos-color-blue-40);
  --utrecht-link-text-decoration: underline;
  --utrecht-link-text-decoration-thickness: 1px;
  --utrecht-link-text-underline-offset: 2px;
  --utrecht-link-hover-color: var(--ppmos-color-blue-60);
  --utrecht-link-hover-text-decoration-thickness: 2px;
  --utrecht-link-focus-background-color: #fed201;
  --utrecht-link-focus-color: var(--ppmos-color-gray-90);

  /* ── Focus (rijkshuisstijl yellow) ────────────────────────────── */
  --utrecht-focus-outline-color: #fed201;
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 0;

  /* ── Button ──────────────────────────────────────────────────── */
  --utrecht-button-font-family: var(--utrecht-document-font-family);
  --utrecht-button-font-weight: 700;
  --utrecht-button-min-height: 44px;
  --utrecht-button-padding-block: 10px;
  --utrecht-button-padding-inline: 16px;
  --utrecht-button-border-radius: 0;
  --utrecht-button-border-width: 1px;

  --utrecht-button-primary-action-background-color: var(--ppmos-color-blue-60);
  --utrecht-button-primary-action-color: var(--ppmos-color-gray-00);
  --utrecht-button-primary-action-border-color: var(--ppmos-color-blue-60);
  --utrecht-button-primary-action-hover-background-color: var(--ppmos-color-blue-70);
  --utrecht-button-primary-action-hover-border-color: var(--ppmos-color-blue-70);

  --utrecht-button-secondary-action-background-color: var(--ppmos-color-gray-00);
  --utrecht-button-secondary-action-color: var(--ppmos-color-blue-60);
  --utrecht-button-secondary-action-border-color: var(--ppmos-color-blue-60);
  --utrecht-button-secondary-action-hover-background-color: var(--ppmos-color-blue-05);

  --utrecht-button-subtle-action-background-color: transparent;
  --utrecht-button-subtle-action-color: var(--ppmos-color-blue-40);
  --utrecht-button-subtle-action-border-color: transparent;

  /* ── Page header ─────────────────────────────────────────────── */
  --utrecht-page-header-border-block-end-color: var(--ppmos-color-blue-60);
  --utrecht-page-header-border-block-end-width: 8px;

  --utrecht-page-footer-background-color: var(--ppmos-color-blue-60);
  --utrecht-page-footer-color: var(--ppmos-color-gray-00);

  /* ── Surfaces ────────────────────────────────────────────────── */
  --ppmos-surface-subtle: var(--ppmos-color-gray-02);
  --ppmos-surface-brand: var(--ppmos-color-blue-05);
  --ppmos-surface-inverse: var(--ppmos-color-blue-60);
  --ppmos-rule: var(--ppmos-color-gray-10);
  --ppmos-rule-strong: var(--ppmos-color-gray-90);

  /* ── Spacing ─────────────────────────────────────────────────── */
  --ppmos-space-2xs: 4px;
  --ppmos-space-xs: 8px;
  --ppmos-space-sm: 12px;
  --ppmos-space-md: 16px;
  --ppmos-space-lg: 24px;
  --ppmos-space-xl: 32px;
  --ppmos-space-2xl: 48px;
  --ppmos-space-3xl: 72px;
}

.ppmos-theme[data-density="compact"] {
  --utrecht-heading-1-font-size: 2rem;
  --utrecht-heading-2-font-size: 1.25rem;
  --utrecht-paragraph-lead-font-size: 1rem;
  --utrecht-button-min-height: 38px;
  --ppmos-space-2xl: 32px;
  --ppmos-space-3xl: 48px;
}