/* Dark appearance: it follows the Mac's dark mode, or the toggle in the toolbar (html[data-theme]).
   Oryzen is light only, so this is product-specific: it overrides the same Oryzen tokens (and nothing else) with values chosen for
   contrast on dark surfaces. app.css still refers to tokens by name only. Text on every surface stays above 4.5:1; status colours
   keep a text label next to them, never colour alone. The token list appears twice (forced dark, and system dark): a test keeps them identical. */

/* chosen light with the toolbar toggle while the Mac is dark: keep the native controls light too */
:root[data-theme="light"] { color-scheme: light; }

/* chosen with the toolbar toggle */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg-default-base: #232328;
  --bg-default-primary: #18181c;
  --bg-default-secondary: #2c2c33;
  --bg-default-tertiary: #34343c;
  --bg-default-interactive: #4a4a55;
  --bg-default-solid-active: #08080b;
  --bg-accent-primary: #2f2c4f;
  --bg-accent-solid: #7b7cf0;

  /* text */
  --fg-default-primary: #f0f0f4;
  --fg-default-secondary: #b6b6c2;
  --fg-default-interactive: #d9d9e2;
  --fg-default-inverted: #ffffff;
  --fg-disabled-default: #7c7c88;
  --fg-interactive: #b9adff;
  --fg-interactive-hover: #d0c7ff;
  --fg-error-primary: #ff8f85;
  --fg-error-secondary: #ffb7ae;
  --fg-success-primary: #5fe3a4;
  --fg-utility-amber: #f6c453;
  --fg-warning-primary: #ffb36b;

  /* strokes */
  --stk-default-primary: #4a4a55;
  --stk-default-secondary: #6a6a76;
  --stk-default-tertiary: #34343c;
  --stk-accent-primary: #4d4a85;
  --stk-accent-solid: #9a92ff;
  --stk-inverted: #3b3b44;
  --stk-error-primary: #7d3a36;
  --stk-error-solid: #ff7f74;
  --stk-success-primary: #3fc58a;
  --stk-utility-amber-light: #6c5521;
  --stk-utility-emerald-light: #2d6b53;
  --stk-warning-primary: #f79a2a;
  --stk-warning-tertiary: #7a5a17;

  /* status surfaces */
  --bg-error-primary: #3b2121;
  --bg-error-subtle: #4a2523;
  --bg-success-tertiary: #1d3b2c;
  --bg-utility-amber-light: #3a2f17;
  --bg-utility-emerald-light: #17352a;
  --bg-utility-emerald-on-light: #6fe8b8;
  --bg-warning-primary: #3a2f17;
  --bg-warning-tertiary: #4a3a14;

  /* buttons */
  --btn-primary-filled-default-bg: #5961ec;
  --btn-primary-filled-default-fg: #ffffff;
  --btn-primary-filled-hover-bg: #7077f0;
  --btn-primary-filled-hover-fg: #ffffff;
  --btn-primary-filled-pressed-bg: #4850d6;
  --btn-primary-filled-pressed-fg: #ffffff;
  --btn-primary-txt-default-fg: #b9adff;
  --btn-primary-txt-hover-fg: #d0c7ff;
  --btn-sec-grey-stroked-default-bg: #2f2f36;
  --btn-sec-grey-stroked-default-fg: #e6e6ee;
  --btn-sec-grey-stroked-default-stk: #55555f;
  --btn-sec-grey-stroked-hover-bg: #3a3a43;
  --btn-sec-grey-stroked-hover-stk: #8a8a96;
  --btn-sec-grey-stroked-pressed-bg: #2f2f36;
  --btn-sec-grey-stroked-pressed-fg: #ffffff;
  --btn-sec-grey-stroked-pressed-stk: #b6b6c2;
  --btn-sec-grey-ghost-default-fg: #d9d9e2;
  --btn-sec-grey-ghost-hover-bg: #34343c;
  --btn-disabled-bg: #2a2a30;
  --btn-disabled-fg: #7c7c88;
  --btn-disabled-stk: #34343c;
  --btn-destructive-filled-default-bg: #c9392d;
  --btn-destructive-filled-default-fg: #ffffff;
  --btn-destructive-filled-hover-bg: #dd4a3e;
  --btn-destructive-filled-pressed-bg: #a02a20;
  --btn-destructive-filled-pressed-fg: #ffffff;
  --btn-destructive-stroked-default-bg: #2f2f36;
  --btn-destructive-stroked-default-fg: #ff8f85;
  --btn-destructive-stroked-default-stk: #b3463e;
  --btn-destructive-stroked-hover-bg: #3d2422;
  --btn-destructive-stroked-hover-fg: #ffb7ae;
  --btn-destructive-stroked-hover-stk: #ff8f85;

  /* inputs */
  --input-default-bg: #1c1c21;
  --input-default-fg: #f0f0f4;
  --input-default-stk: #55555f;
  --input-default-placeholder: #9a9aa6;
  --input-disabled-bg: #26262b;
  --input-disabled-fg: #7c7c88;
  --input-disabled-stk: #34343c;
  --input-filled-label-fg: #b6b6c2;

  /* focus */
  --focus-ring-base: #34343c;
  --focus-ring-default: #b9adff;
  --focus-ring-error: #ff8f85;

  /* shadows: darker, since light shadows do not read on dark surfaces */
  --shadow-100: rgb(0 0 0 / 25%);
  --shadow-200: rgb(0 0 0 / 25%);
  --shadow-300-01: rgb(0 0 0 / 35%);
  --shadow-300-02: rgb(0 0 0 / 25%);
  --shadow-500-01: rgb(0 0 0 / 40%);
  --shadow-500-02: rgb(0 0 0 / 30%);
}
:root[data-theme="dark"] body::before { opacity: 0.55; }

/* the Mac is in dark mode and nobody chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* surfaces */
    --bg-default-base: #232328;
    --bg-default-primary: #18181c;
    --bg-default-secondary: #2c2c33;
    --bg-default-tertiary: #34343c;
    --bg-default-interactive: #4a4a55;
    --bg-default-solid-active: #08080b;
    --bg-accent-primary: #2f2c4f;
    --bg-accent-solid: #7b7cf0;

    /* text */
    --fg-default-primary: #f0f0f4;
    --fg-default-secondary: #b6b6c2;
    --fg-default-interactive: #d9d9e2;
    --fg-default-inverted: #ffffff;
    --fg-disabled-default: #7c7c88;
    --fg-interactive: #b9adff;
    --fg-interactive-hover: #d0c7ff;
    --fg-error-primary: #ff8f85;
    --fg-error-secondary: #ffb7ae;
    --fg-success-primary: #5fe3a4;
    --fg-utility-amber: #f6c453;
    --fg-warning-primary: #ffb36b;

    /* strokes */
    --stk-default-primary: #4a4a55;
    --stk-default-secondary: #6a6a76;
    --stk-default-tertiary: #34343c;
    --stk-accent-primary: #4d4a85;
    --stk-accent-solid: #9a92ff;
    --stk-inverted: #3b3b44;
    --stk-error-primary: #7d3a36;
    --stk-error-solid: #ff7f74;
    --stk-success-primary: #3fc58a;
    --stk-utility-amber-light: #6c5521;
    --stk-utility-emerald-light: #2d6b53;
    --stk-warning-primary: #f79a2a;
    --stk-warning-tertiary: #7a5a17;

    /* status surfaces */
    --bg-error-primary: #3b2121;
    --bg-error-subtle: #4a2523;
    --bg-success-tertiary: #1d3b2c;
    --bg-utility-amber-light: #3a2f17;
    --bg-utility-emerald-light: #17352a;
    --bg-utility-emerald-on-light: #6fe8b8;
    --bg-warning-primary: #3a2f17;
    --bg-warning-tertiary: #4a3a14;

    /* buttons */
    --btn-primary-filled-default-bg: #5961ec;
    --btn-primary-filled-default-fg: #ffffff;
    --btn-primary-filled-hover-bg: #7077f0;
    --btn-primary-filled-hover-fg: #ffffff;
    --btn-primary-filled-pressed-bg: #4850d6;
    --btn-primary-filled-pressed-fg: #ffffff;
    --btn-primary-txt-default-fg: #b9adff;
    --btn-primary-txt-hover-fg: #d0c7ff;
    --btn-sec-grey-stroked-default-bg: #2f2f36;
    --btn-sec-grey-stroked-default-fg: #e6e6ee;
    --btn-sec-grey-stroked-default-stk: #55555f;
    --btn-sec-grey-stroked-hover-bg: #3a3a43;
    --btn-sec-grey-stroked-hover-stk: #8a8a96;
    --btn-sec-grey-stroked-pressed-bg: #2f2f36;
    --btn-sec-grey-stroked-pressed-fg: #ffffff;
    --btn-sec-grey-stroked-pressed-stk: #b6b6c2;
    --btn-sec-grey-ghost-default-fg: #d9d9e2;
    --btn-sec-grey-ghost-hover-bg: #34343c;
    --btn-disabled-bg: #2a2a30;
    --btn-disabled-fg: #7c7c88;
    --btn-disabled-stk: #34343c;
    --btn-destructive-filled-default-bg: #c9392d;
    --btn-destructive-filled-default-fg: #ffffff;
    --btn-destructive-filled-hover-bg: #dd4a3e;
    --btn-destructive-filled-pressed-bg: #a02a20;
    --btn-destructive-filled-pressed-fg: #ffffff;
    --btn-destructive-stroked-default-bg: #2f2f36;
    --btn-destructive-stroked-default-fg: #ff8f85;
    --btn-destructive-stroked-default-stk: #b3463e;
    --btn-destructive-stroked-hover-bg: #3d2422;
    --btn-destructive-stroked-hover-fg: #ffb7ae;
    --btn-destructive-stroked-hover-stk: #ff8f85;

    /* inputs */
    --input-default-bg: #1c1c21;
    --input-default-fg: #f0f0f4;
    --input-default-stk: #55555f;
    --input-default-placeholder: #9a9aa6;
    --input-disabled-bg: #26262b;
    --input-disabled-fg: #7c7c88;
    --input-disabled-stk: #34343c;
    --input-filled-label-fg: #b6b6c2;

    /* focus */
    --focus-ring-base: #34343c;
    --focus-ring-default: #b9adff;
    --focus-ring-error: #ff8f85;

    /* shadows: darker, since light shadows do not read on dark surfaces */
    --shadow-100: rgb(0 0 0 / 25%);
    --shadow-200: rgb(0 0 0 / 25%);
    --shadow-300-01: rgb(0 0 0 / 35%);
    --shadow-300-02: rgb(0 0 0 / 25%);
    --shadow-500-01: rgb(0 0 0 / 40%);
    --shadow-500-02: rgb(0 0 0 / 30%);
  }
  /* the logo gradient fades back so it does not compete with the document */
  :root:not([data-theme="light"]) body::before { opacity: 0.55; }
}