/* Arcane shared appearance contract.
 * Applications load this before app CSS so saved or device appearance remains
 * the base layer. Extension tokens are narrow semantic overrides only.
 */

:root,
:root[data-color-scheme="light"] {
  color-scheme: light;
  --background: rgb(244, 246, 251);
  --modal-background: rgb(255, 255, 255);
  --text-color: rgb(23, 34, 56);
  --primary-color: rgb(23, 34, 56);
  --secondary-color: rgb(229, 233, 243);
  --accent-color: var(--focus-color);
  --button-text-color: rgb(255, 255, 255);
  --border-color: rgb(203, 211, 226);
  --focus-color: rgb(75, 85, 163);
  --muted-text-color: rgb(95, 107, 130);
  --success-color: rgb(39, 122, 75);
  --warning-color: rgb(154, 101, 0);
  --danger-color: rgb(165, 56, 56);
  --shadow-color: rgba(23, 34, 56, .14);
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --background: rgb(13, 18, 32);
  --modal-background: rgb(21, 28, 45);
  --text-color: rgb(237, 241, 250);
  --primary-color: rgb(36, 43, 66);
  --secondary-color: rgb(26, 33, 52);
  --accent-color: var(--focus-color);
  --button-text-color: rgb(255, 255, 255);
  --border-color: rgb(59, 69, 94);
  --focus-color: rgb(171, 148, 255);
  --muted-text-color: rgb(174, 184, 204);
  --success-color: rgb(97, 201, 144);
  --warning-color: rgb(233, 184, 95);
  --danger-color: rgb(240, 128, 128);
  --shadow-color: rgba(0, 0, 0, .42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
    color-scheme: dark;
    --background: rgb(13, 18, 32);
    --modal-background: rgb(21, 28, 45);
    --text-color: rgb(237, 241, 250);
    --primary-color: rgb(36, 43, 66);
    --secondary-color: rgb(26, 33, 52);
    --accent-color: var(--focus-color);
    --button-text-color: rgb(255, 255, 255);
    --border-color: rgb(59, 69, 94);
    --focus-color: rgb(171, 148, 255);
    --muted-text-color: rgb(174, 184, 204);
    --success-color: rgb(97, 201, 144);
    --warning-color: rgb(233, 184, 95);
    --danger-color: rgb(240, 128, 128);
    --shadow-color: rgba(0, 0, 0, .42);
  }
}

html,
body {
  background: var(--background);
  color: var(--text-color);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) *,
  :root:not([data-reduce-motion="false"]) *::before,
  :root:not([data-reduce-motion="false"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}