/*
 * Superior Design System — single source of truth for the palette and the
 * theme-driven overrides. No raw hex lives in templates; everything composes
 * from these semantic tokens. See Docs/Superior_Design_System.md.
 */

:root {
  --superior-orange: 207 69 32;   /* #CF4520 */
  --superior-canvas: 245 245 245; /* #F5F5F5 */
  --superior-paper:  255 255 255; /* #FFFFFF */
  --superior-ink:    83 86 90;    /* #53565A */
  --superior-stone:  136 139 141; /* #888B8D */
  --superior-black:  0 0 0;       /* #000000 */
  --superior-ok:     63 122 95;   /* #3F7A5F */
  --superior-alarm:  156 79 79;   /* #9C4F4F */
  --superior-warn:   180 83 9;    /* #B45309 */
}

:root.dark {
  --superior-orange: 231 104 66;  /* #E76842 */
  --superior-canvas: 15 15 17;    /* #0F0F11 */
  --superior-paper:  28 28 31;    /* #1C1C1F */
  --superior-ink:    229 231 235; /* #E5E7EB */
  --superior-stone:  156 163 175; /* #9CA3AF */
  --superior-black:  255 255 255; /* #FFFFFF */
  --superior-ok:     95 178 138;  /* #5FB28A */
  --superior-alarm:  197 131 131; /* #C58383 */
  --superior-warn:   224 165 46;  /* #E0A52E */
}

/* Paint the canvas before the Play CDN finishes compiling utilities. */
html,
body {
  background-color: rgb(var(--superior-canvas));
}

/* Theme-toggle icon swap: show the moon in light mode, the sun in dark. */
.theme-toggle .theme-toggle__sun {
  display: none;
}
.theme-toggle .theme-toggle__moon {
  display: inline-block;
}
:root.dark .theme-toggle .theme-toggle__sun {
  display: inline-block;
}
:root.dark .theme-toggle .theme-toggle__moon {
  display: none;
}

/* Form controls: re-theme the forms plugin's hard-coded white in dark mode. */
:root.dark input,
:root.dark select,
:root.dark textarea {
  background-color: rgb(var(--superior-paper));
  border-color: rgb(var(--superior-stone) / 0.4);
  color: rgb(var(--superior-ink));
}

/* Rendered Markdown picks up the theme by overriding the plugin's variables. */
:root .prose {
  --tw-prose-body: rgb(var(--superior-ink));
  --tw-prose-headings: rgb(var(--superior-orange));
  --tw-prose-bold: rgb(var(--superior-ink));
  --tw-prose-links: rgb(var(--superior-orange));
}

/* Motion: felt more than seen. A single quiet entrance, transform+opacity only. */
@keyframes superior-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: superior-fade-up 200ms ease-out both;
}

/* Progress bar fill animates width changes smoothly (state communication). */
.progress-fill {
  transition: width 300ms ease-out;
}

/* Hide Alpine-controlled elements until Alpine initializes. */
[x-cloak] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    animation: none;
  }
  .progress-fill {
    transition: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}