/* src/frontend/styles.css */
:root {
  --background: #f8f7f2;
  --foreground: #1a1a1a;
  --card: #fff;
  --card-foreground: #1a1a1a;
  --primary: #c1a875;
  --primary-foreground: #fff;
  --secondary: #e5e1d5;
  --secondary-foreground: #1a1a1a;
  --muted: #f1ede1;
  --muted-foreground: #6b6352;
  --accent: #c1a875;
  --accent-foreground: #fff;
  --destructive: #d32f2f;
  --destructive-foreground: #fff;
  --border: #e2decb;
  --input: #e2decb;
  --ring: #c1a875;
  --font-sans: Inter, -apple-system, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius: .75rem;
  --shadow-color: #000;
  --shadow-opacity: .05;
  --shadow-blur: 15px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  font-synthesis: none;
  letter-spacing: -.02em;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
}

button, select {
  font: inherit;
}

button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

select:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

#root {
  min-height: 100vh;
}

main {
  width: min(36rem, 100% - 3rem);
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 5rem) 0 4rem;
}

.eyebrow {
  display: inline-block;
  color: var(--muted-foreground);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 700;
}

h1 {
  font-family: var(--font-serif);
  letter-spacing: -.055em;
  margin: 0;
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 400;
  line-height: .92;
}

.description {
  color: var(--muted-foreground);
  max-width: 31rem;
  margin: 2rem 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.status {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) rgb(0 0 0 / var(--shadow-opacity));
  align-items:  center;
  gap: .65rem;
  padding: .7rem .9rem;
  font-size: .875rem;
}

.status span {
  background: var(--primary);
  border-radius: 50%;
  width: .55rem;
  height: .55rem;
}

.status-ok span {
  background: #3f8d65;
}

.status-unavailable span {
  background: var(--destructive);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #141412;
    --foreground: #f8f7f2;
    --card: #1e1e1c;
    --card-foreground: #f8f7f2;
    --primary: #d4bc8b;
    --primary-foreground: #141412;
    --secondary: #2d2b28;
    --secondary-foreground: #f8f7f2;
    --muted: #242422;
    --muted-foreground: #a39e94;
    --accent: #d4bc8b;
    --accent-foreground: #141412;
    --destructive: #ef4444;
    --destructive-foreground: #f8f7f2;
    --border: #2d2b28;
    --input: #2d2b28;
    --ring: #d4bc8b;
    --shadow-opacity: .4;
    --shadow-blur: 25px;
    --shadow-offset-y: 10px;
  }
}

.button {
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid #0000;
  width: -moz-fit-content;
  width: fit-content;
  padding: .7rem 1rem;
  transition: background-color .12s, border-color .12s, transform 80ms;
  font-weight: 650;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  cursor: wait;
  opacity: .55;
}

.button--primary {
  border-color: var(--primary);
  color: var(--primary-foreground);
  background: var(--primary);
}

.button--primary:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}

.button--primary:active:not(:disabled) {
  border-color: var(--primary-active);
  background: var(--primary-active);
}

.button--secondary {
  border-color: var(--secondary);
  color: var(--secondary-foreground);
  background: var(--secondary);
}

.button--secondary:hover:not(:disabled) {
  border-color: var(--secondary-hover);
  background: var(--secondary-hover);
}

.button--secondary:active:not(:disabled) {
  border-color: var(--secondary-active);
  background: var(--secondary-active);
}

.button--destructive {
  border-color: var(--destructive);
  color: var(--destructive-foreground);
  background: var(--destructive);
}

.button--destructive:hover:not(:disabled) {
  border-color: var(--destructive-hover);
  background: var(--destructive-hover);
}

.button--destructive:active:not(:disabled) {
  border-color: var(--destructive-active);
  background: var(--destructive-active);
}