/* Artemisia Network palette layer. */

html[data-theme="dark"] {
  --bg:            #0B0C16;
  --surface:       #13142A;
  --surface-2:     #1A1C33;
  --surface-3:     #222742;
  --border:        #23263F;
  --border-strong: #353B5B;
  --ink:           #ECEDF7;
  --ink-2:         #A6A4BA;
  --ink-3:         #8D808E;

  --fg:            #97A6F0;
  --fg-ink:        #0B0C16;
  --link:          #97A6F0;

  --ok:            #57cf90;
  --ok-bg:         rgba(87, 207, 144, 0.10);
  --ok-border:     rgba(87, 207, 144, 0.26);

  --warn:          #e0b24a;
  --warn-bg:       rgba(224, 178, 74, 0.10);
  --warn-border:   rgba(224, 178, 74, 0.26);

  --danger:        #e8788a;
  --danger-bg:     rgba(232, 120, 138, 0.10);
  --danger-border: rgba(232, 120, 138, 0.26);

  --header-bg:     rgba(11, 12, 22, 0.74);
  --well:          #0A0B13;
}

html[data-theme="light"] {
  --bg:            #F6F7FC;
  --surface:       #FFFFFF;
  --surface-2:     #F0F1F8;
  --surface-3:     #E6E8F3;
  --border:        #E6E8F2;
  --border-strong: #D2D6E6;
  --ink:           #15172A;
  --ink-2:         #585A73;
  --ink-3:         #8D808E;

  --fg:            #5563D8;
  --fg-ink:        #FFFFFF;
  --link:          #4A5BD0;

  --ok:            #1f9d57;
  --ok-bg:         rgba(31, 157, 87, 0.09);
  --ok-border:     rgba(31, 157, 87, 0.24);

  --warn:          #b07d12;
  --warn-bg:       rgba(176, 125, 18, 0.10);
  --warn-border:   rgba(176, 125, 18, 0.26);

  --danger:        #d2475c;
  --danger-bg:     rgba(210, 71, 92, 0.08);
  --danger-border: rgba(210, 71, 92, 0.24);

  --header-bg:     rgba(246, 247, 252, 0.78);
  --well:          #EEF0F8;
}

html[data-theme] .ph {
  background-color: var(--well);
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
}

html[data-theme] .input,
html[data-theme] .select,
html[data-theme] .search input,
html[data-theme] .readonly-line {
  background: var(--well);
}

html[data-theme] .logo .mark {
  background: linear-gradient(150deg, var(--fg) 0%, color-mix(in srgb, var(--fg) 64%, var(--surface-3)) 100%);
  color: var(--fg-ink);
}

html[data-theme] .card:hover {
  border-color: color-mix(in srgb, var(--fg) 40%, var(--border-strong));
  background: var(--surface-3);
}

html[data-theme] .btn-primary {
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent) inset;
}

html[data-theme] .btn-primary:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 86%, #ffffff);
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--fg) 70%, transparent);
}

html[data-theme] .input:focus,
html[data-theme] .select:focus,
html[data-theme] .search input:focus,
html[data-theme] .search-trigger:hover,
html[data-theme] .search-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--fg) 60%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 16%, transparent);
}

html[data-theme] .spotlight-glyph {
  background: var(--well);
}

html[data-theme] .chip.active {
  color: var(--fg-ink);
}

html[data-theme] .badge svg {
  color: var(--fg);
}

html[data-theme="light"] .spotlight-panel {
  box-shadow: 0 24px 70px -28px rgba(21, 23, 42, 0.30);
}

html[data-theme="light"] .auth-panel {
  box-shadow: 0 22px 60px -30px rgba(21, 23, 42, 0.22);
}

html[data-theme="light"] .modal {
  box-shadow: 0 24px 60px -20px rgba(21, 23, 42, 0.28);
}

html[data-theme="light"] .menu {
  box-shadow: 0 12px 30px -14px rgba(21, 23, 42, 0.22);
}