/* Theme colors only. Keep light values in sync with the original styles.css. */
:root {
  --ddb-text-1: #161517;
  --ddb-text-2: #0A85C2;
  --ddb-background-3: #2372de;
  --ddb-text-4: #ffffff;
  --ddb-text-5: #878787;
  --ddb-text-6: #4a4a4a;
  --ddb-text-7: #777;
  --ddb-background-8: white;
  --ddb-border-9: #d8dee4;
  --ddb-text-10: #666;
  --ddb-border-11: #939393;
  --ddb-background-12: #ffffff;
  --ddb-text-13: #2372de;
  --ddb-background-14: rgba(147, 147, 147, 0.06);
  --ddb-text-15: #494949;
  --ddb-background-16: #161517;
  --ddb-text-17: #E5E5E5;
  --ddb-text-18: #000000;
  --ddb-text-19: #1f3c88;
  --ddb-background-20: #E5F6FD;
  --ddb-text-21: #333333;
  --ddb-text-22: #555;
  --ddb-border-23: #dce5f2;
  --ddb-border-24: #babdc1;
  --ddb-border-25: #2372de;
  --ddb-background-26: gold;
  --ddb-border-27: grey;
  --ddb-background-28: #ddd;
  --ddb-background-29: #f9f9f9;
  --ddb-background-30: #f1f1f1;
  --ddb-background-31: #EAEEF2;
  --ddb-text-32: #0f0f0f;
  --ddb-text-33: #619bab;
  --ddb-text-34: #032f62;
  --ddb-text-35: #6A737D;
  --ddb-text-36: #005cc5;
  --ddb-border-37: black;
  --ddb-background-38: #0A85C2;
  --ddb-background-39: #346ec5;
  --ddb-border-40: #346ec5;
  --ddb-text-41: white;
  --ddb-background-42: #000;
  --ddb-text-43: #006621;
  --ddb-border-44: #494949;
}

@media screen {
  :root[data-wh-theme="dark"] {
    color-scheme: dark;

    /* Semantic colors for WebHelp components and interaction states. */
    --ddb-surface: #212529;
    --ddb-surface-raised: #2b3035;
    --ddb-surface-hover: #343d46;
    --ddb-surface-selected: #233b57;
    --ddb-text: #e3e3e3;
    --ddb-text-muted: #b8bec5;
    --ddb-link: #8ab4f8;
    --ddb-link-hover: #b6d2ff;
    --ddb-border: #495057;
    --ddb-control-border: #77818b;
    --ddb-focus-ring: #8ab4f8;
    --ddb-action: #285ca8;
    --ddb-action-hover: #316bc0;
    --ddb-on-action: #ffffff;
    --ddb-code-background: #282f37;
    --ddb-code-directive: #d2a8ff;
    --ddb-inline-code-background: #344458;
    --ddb-inline-code-text: #d7e9ff;
    --ddb-table-header-background: #344b64;
    --ddb-table-header-text: #f3f7ff;
    --ddb-table-header-border: #83a9d3;
    /* Legacy diagrams contain black labels on transparent pixels. */
    --ddb-image-background: #ffffff;
    --ddb-note-background: #203746;
    --ddb-note-border: #67b5d8;
    --ddb-highlight-background: #655014;
    --ddb-highlight-text: #fff0bd;
    --ddb-error-background: #452a2d;
    --ddb-error-text: #ffb4ab;
    --ddb-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

    /* Existing numbered tokens remain compatible with styles.css. */
    --ddb-text-1: var(--ddb-text);
    --ddb-text-2: var(--ddb-link);
    --ddb-background-3: #343a40;
    --ddb-text-4: var(--ddb-text);
    --ddb-text-5: var(--ddb-text-muted);
    --ddb-text-6: var(--ddb-text-muted);
    --ddb-text-7: var(--ddb-text-muted);
    --ddb-background-8: var(--ddb-surface);
    --ddb-border-9: var(--ddb-border);
    --ddb-text-10: var(--ddb-text-muted);
    --ddb-border-11: var(--ddb-border);
    --ddb-background-12: var(--ddb-surface);
    --ddb-text-13: var(--ddb-link);
    --ddb-background-14: rgba(255, 255, 255, 0.06);
    --ddb-text-15: var(--ddb-text-muted);
    --ddb-background-16: #1b1f23;
    --ddb-text-17: #d5d9de;
    --ddb-text-18: var(--ddb-text);
    --ddb-text-19: #9bb8ef;
    --ddb-background-20: var(--ddb-note-background);
    --ddb-text-21: var(--ddb-text);
    --ddb-text-22: var(--ddb-text-muted);
    --ddb-border-23: var(--ddb-border);
    --ddb-border-24: var(--ddb-border);
    --ddb-border-25: var(--ddb-background-3);
    --ddb-background-26: var(--ddb-highlight-background);
    --ddb-border-27: var(--ddb-border);
    --ddb-background-28: #343a40;
    --ddb-background-29: var(--ddb-surface-raised);
    --ddb-background-30: var(--ddb-surface-hover);
    --ddb-background-31: var(--ddb-code-background);
    --ddb-text-32: var(--ddb-text);
    --ddb-text-33: #85c7e8;
    --ddb-text-34: #a5d6a7;
    --ddb-text-35: var(--ddb-text-muted);
    --ddb-text-36: #f0c78a;
    --ddb-border-37: var(--ddb-border);
    --ddb-background-38: var(--ddb-action);
    --ddb-background-39: var(--ddb-action);
    --ddb-border-40: var(--ddb-action);
    --ddb-text-41: var(--ddb-on-action);
    --ddb-background-42: var(--ddb-action);
    --ddb-text-43: #94d3a2;
    --ddb-border-44: var(--ddb-border);
  }
}