/* Stay Unseen 2.0.0 - design system derived from the product mark.
   Three moves and no more: neutral charcoal surfaces stepped by tone, the
   mark's slate for anything structural, and a single saturated blue spent only
   on brand, primary action and the thing you are currently looking at. The
   mark carries no gradient, so the interface carries none either. */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces: a neutral climb from page to well to card to control. */
  --bg: #0b0d12;
  --deep: #0a0c11;
  --surface-primary: #0f1218;
  --panel: #151922;
  --surface-secondary: #1c212b;
  --charcoal: #1c212b;
  --elevated: #232935;

  /* Ink: cool greys lifted from the mark's glyph. */
  --ink: #f1f3f7;
  --muted: #9ba3b0;
  --muted-dim: #7f8895;

  /* Structure: tinted with the mark's slate so edges read brand-adjacent. */
  --line: rgb(148 163 184 / .18);
  --border-color: rgb(148 163 184 / .18);

  /* Brand: the mark's dominant slate. Structural, never the loudest thing. */
  --slate: #5c6c8d;
  --steel: #8090ae;
  --indigo: #3d5578;
  --lavender: #6d84ab;
  --magenta: #6d84ab;
  --brand-secondary: #5c6c8d;

  /* Accent: one saturated blue, taken from the mark's download badge. */
  --blue: #499ef3;
  --blue-hi: #6cb0f7;
  --blue-lo: #2f80d2;
  --blue-ink: #8fc0f2;
  --brand-primary: #499ef3;
  --brand-accent: #2f80d2;
  --brand-action: #2571bb;
  --action-hi: #2676c2;
  --cyan: #499ef3;
  --accent: #cdd8e8;

  --brand-glow: 0 10px 30px rgb(0 0 0 / .45);
  --card-shadow: 0 10px 30px rgb(0 0 0 / .4);
  --nav-bg: rgb(14 17 23 / .9);

  /* Status: muted on purpose, so state reads as information not decoration. */
  --good: #45b183;
  --amber: #d2a05c;
  --rose: #d4797f;

  --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="light"] {
  color-scheme: light;

  /* Surfaces: neutral/off-white surfaces, not simple color inversion. */
  --bg: #f5f6f8;
  --deep: #eef1f6;
  --surface-primary: #ffffff;
  --panel: #ffffff;
  --surface-secondary: #eef1f6;
  --charcoal: #e2e6ed;
  --elevated: #dbe0ea;

  /* Ink: high-contrast dark slate / charcoal text. */
  --ink: #0f131a;
  --muted: #525d6f;
  --muted-dim: #606c80;

  /* Structure: clean slate edges. */
  --line: rgb(15 23 42 / .12);
  --border-color: rgb(15 23 42 / .12);

  /* Brand: slate and steel accents. */
  --slate: #64748b;
  --steel: #52647e;
  --indigo: #475569;
  --lavender: #94a3b8;
  --magenta: #64748b;
  --brand-secondary: #64748b;

  /* Accent: darker shades of the mark's blue for readable light-theme controls. */
  --blue: #2166aa;
  --blue-hi: #2166aa;
  --blue-lo: #1b568f;
  --blue-ink: #2166aa;
  --brand-primary: #2166aa;
  --brand-accent: #2166aa;
  --brand-action: #2571bb;
  --action-hi: #2166aa;
  --cyan: #2166aa;
  --accent: #1e293b;

  --brand-glow: 0 10px 30px rgb(15 23 42 / .08);
  --card-shadow: 0 10px 30px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .04);
  --nav-bg: rgb(255 255 255 / .92);

  /* Status: clear semantic signals. */
  --good: #13764f;
  --amber: #8b5a12;
  --rose: #b42d48;

  --ease: cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f5f6f8;
    --deep: #eef1f6;
    --surface-primary: #ffffff;
    --panel: #ffffff;
    --surface-secondary: #eef1f6;
    --charcoal: #e2e6ed;
    --elevated: #dbe0ea;
    --ink: #0f131a;
    --muted: #525d6f;
    --muted-dim: #606c80;
    --line: rgb(15 23 42 / .12);
    --border-color: rgb(15 23 42 / .12);
    --slate: #64748b;
    --steel: #52647e;
    --indigo: #475569;
    --lavender: #94a3b8;
    --magenta: #64748b;
    --brand-secondary: #64748b;
    --blue: #2166aa;
    --blue-hi: #2166aa;
    --blue-lo: #1b568f;
    --blue-ink: #2166aa;
    --brand-primary: #2166aa;
    --brand-accent: #2166aa;
    --brand-action: #2571bb;
    --action-hi: #2166aa;
    --cyan: #2166aa;
    --accent: #1e293b;
    --brand-glow: 0 10px 30px rgb(15 23 42 / .08);
    --card-shadow: 0 10px 30px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .04);
    --nav-bg: rgb(255 255 255 / .92);
    --good: #13764f;
    --amber: #8b5a12;
    --rose: #b42d48;
  }
}

/* Themed Brand Logos & Icons */
.brand-logo.light-icon,
.themed-icon.light-icon {
  display: none !important;
}
.brand-logo.dark-icon,
.themed-icon.dark-icon {
  display: inline-block !important;
}
[data-theme="light"] .brand-logo.dark-icon,
[data-theme="light"] .themed-icon.dark-icon {
  display: none !important;
}
[data-theme="light"] .brand-logo.light-icon,
[data-theme="light"] .themed-icon.light-icon {
  display: inline-block !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .brand-logo.dark-icon,
  :root:not([data-theme]) .themed-icon.dark-icon {
    display: none !important;
  }
  :root:not([data-theme]) .brand-logo.light-icon,
  :root:not([data-theme]) .themed-icon.light-icon {
    display: inline-block !important;
  }
}