/* These colors meant to be used only for static HTML pages */

@layer base {
  :root,
  div[class~='force-light'] {
    /* light mode */
    --color-background-secondary-bg-sec-0-110: #f5f5fa;
    --color-background-primary-bg-prim-w-110: #fff;
    --color-background-tertiary-bg-tert-10-70: #e9eaf0;
    --color-sf-act-electric-blue: #2f43f9;

    --color-border-brdr-prim-10-100: #e9eaf0;

    --color-icon-text-icn-txt-prim: #000;
    --color-icon-text-icn-txt-quat: #bfbfbf;
    --color-icon-text-icn-txt-prim-electric: #2f43fa;
    --color-background-bg-blue: #f0f1ff;

    --dropshadow-soft: rgba(0, 0, 0, 0.08);

    --hint-background: #f0f1ff;
  }

  /* Dark mode via media query (prefers-color-scheme) */
  @media (prefers-color-scheme: dark) {
    :root:not([class~='force-light']) {
      --color-background-secondary-bg-sec-0-110: #000;
      --color-background-primary-bg-prim-w-110: #111112;
      --color-background-tertiary-bg-tert-10-70: #343537;
      --color-sf-act-electric-blue: #8894fe;

      --color-border-brdr-prim-10-100: #1e1e1f;

      --color-icon-text-icn-txt-prim: #fff;
      --color-icon-text-icn-txt-quat: #3d3d3d;
      --color-icon-text-icn-txt-prim-electric: #5c6ae5;
      --color-background-bg-blue: #262940;

      --dropshadow-soft: rgba(0, 0, 0, 0.32);
      --hint-background: #26294080;
    }
  }

  /* Dark mode via class selector (for programmatic control) */
  :root.dark,
  :root[class*='dark'],
  div[class~='force-dark'] {
    /* dark mode */
    --color-background-secondary-bg-sec-0-110: #000;
    --color-background-primary-bg-prim-w-110: #111112;
    --color-background-tertiary-bg-tert-10-70: #343537;
    --color-sf-act-electric-blue: #8894fe;

    --color-border-brdr-prim-10-100: #1e1e1f;

    --color-icon-text-icn-txt-prim: #fff;

    --dropshadow-soft: rgba(0, 0, 0, 0.32);
  }
}
