/*
 * Theme tokens: Qatar Ministry of Municipality.
 * Qatar maroon for the brand, cool limestone neutrals, palm green, ochre and
 * red for status (always paired with text). The masthead's serrated lower
 * edge (edge.svg) echoes the flag.
 * Contrast (light): text 15.6:1, muted 6.0:1, maroon on white 9.6:1.
 */
@layer theme {
  :root {
    --color-page: #f2f3f0;
    --color-surface: #ffffff;
    --color-surface-2: #f7f8f6;
    --color-text: #1d2227;
    --color-text-muted: #545c64;
    --color-border: #d3d7d1;
    --color-border-strong: #8d958f;
    --color-accent: #8a1538;
    --color-accent-deep: #5c0e25;
    --color-accent-ink: #ffffff;
    --color-accent-wash: #f6e9ed;
    --color-link: #8a1538;
    --color-focus: #1a5fb4;
    --color-masthead: #5c0e25;
    --color-masthead-2: #741330;
    --color-masthead-ink: #ffffff;
    --color-masthead-muted: #f0d7df;
    --color-success: #2e6b4e;
    --color-success-wash: #e6f1eb;
    --color-warning: #855800;
    --color-warning-wash: #fbf0d9;
    --color-danger: #b3261e;
    --color-danger-wash: #fbe9e7;
    --color-info: #24577e;
    --color-info-wash: #e7f0f7;
    --masthead-edge: url("/themes/qa-mm/edge.svg"); /* root-relative: a url() in a custom property resolves against the stylesheet that uses it */
    --masthead-edge-size: 1.5rem 0.6rem;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]):not([data-contrast="high"]) {
      --color-page: #14171a;
      --color-surface: #1c2024;
      --color-surface-2: #22272c;
      --color-text: #e8eaec;
      --color-text-muted: #aab1b8;
      --color-border: #363d44;
      --color-border-strong: #69727b;
      --color-accent: #e8a3b6;
      --color-accent-deep: #f3c9d5;
      --color-accent-ink: #2a0611;
      --color-accent-wash: #3a1522;
      --color-link: #f0b4c5;
      --color-focus: #8ab8ff;
      --color-masthead: #3b0918;
      --color-masthead-2: #4d0c20;
      --color-success: #7fcca4;
      --color-success-wash: #17302a;
      --color-warning: #e5bd6a;
      --color-warning-wash: #33290f;
      --color-danger: #ff9b91;
      --color-danger-wash: #3a1714;
      --color-info: #8fc2ea;
      --color-info-wash: #142838;
    }
  }
  :root[data-scheme="dark"]:not([data-contrast="high"]) {
    --color-page: #14171a;
    --color-surface: #1c2024;
    --color-surface-2: #22272c;
    --color-text: #e8eaec;
    --color-text-muted: #aab1b8;
    --color-border: #363d44;
    --color-border-strong: #69727b;
    --color-accent: #e8a3b6;
    --color-accent-deep: #f3c9d5;
    --color-accent-ink: #2a0611;
    --color-accent-wash: #3a1522;
    --color-link: #f0b4c5;
    --color-focus: #8ab8ff;
    --color-masthead: #3b0918;
    --color-masthead-2: #4d0c20;
    --color-success: #7fcca4;
    --color-success-wash: #17302a;
    --color-warning: #e5bd6a;
    --color-warning-wash: #33290f;
    --color-danger: #ff9b91;
    --color-danger-wash: #3a1714;
    --color-info: #8fc2ea;
    --color-info-wash: #142838;
  }
  :root[data-contrast="high"] {
    --color-accent: #5c0e25;
    --color-accent-wash: #ffffff;
    --color-masthead: #000000;
    --color-masthead-2: #000000;
    --color-masthead-muted: #ffffff;
    --color-success: #0b4a2c;
    --color-warning: #4d3300;
    --color-danger: #8a0000;
    --color-info: #0a3a5c;
  }
}