/*
 * "Claude" theme for the TubeGen status page — modeled on status.anthropic.com:
 * warm ivory canvas, white cards with hairline borders, statuspage green/amber/red,
 * charcoal buttons, coral accent. Injected after the app's own styles by the
 * status-proxy (nginx sub_filter), so plain re-declarations of the shadcn CSS
 * variables win without touching the prebuilt image.
 */

/* :root:root — the app re-declares these vars from a <style> rendered inside <body>
 * (later in document order than our injected <link>), so win on specificity instead. */
:root:root {
  --background: #faf9f5;
  --foreground: #1f1e1d;
  --card: #ffffff;
  --card-foreground: #1f1e1d;
  --popover: #ffffff;
  --popover-foreground: #1f1e1d;
  --primary: #1f1e1d;
  --primary-foreground: #faf9f5;
  --secondary: #f0eee6;
  --secondary-foreground: #1f1e1d;
  --muted: #f0eee6;
  --muted-foreground: #6b675c;
  --accent: #f0eee6;
  --accent-foreground: #1f1e1d;
  --border: #e6e3d7;
  --input: #e6e3d7;
  --ring: #d97757;
  --destructive: #c53a1c;
  --success: #6da33c;
  --warning: #dfa32e;
  --info: #4a7dbd;
  --radius: 0.75rem;
  --chart-1: #d97757;
  --chart-2: #6da33c;
  --chart-3: #dfa32e;
  --chart-4: #4a7dbd;
  --chart-5: #8f8a7e;
}

:root:root.dark {
  --background: #1f1e1d;
  --foreground: #f5f4ef;
  --card: #262524;
  --card-foreground: #f5f4ef;
  --popover: #262524;
  --popover-foreground: #f5f4ef;
  --primary: #f5f4ef;
  --primary-foreground: #1f1e1d;
  --secondary: #32302e;
  --secondary-foreground: #f5f4ef;
  --muted: #32302e;
  --muted-foreground: #a5a096;
  --accent: #32302e;
  --accent-foreground: #f5f4ef;
  --border: #3a3835;
  --input: #3a3835;
  --ring: #d97757;
  --destructive: #e5673f;
  --success: #7db84c;
  --warning: #e9b04a;
  --info: #6f9fd8;
}

/* status.anthropic.com is sans-serif throughout — soften the terminal look by
 * pointing the mono utility at the sans stack (charts/timestamps included). */
.font-mono,
[class*="font-mono"] {
  font-family:
    "Geist",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif !important;
  letter-spacing: 0;
}

/* The app tags every element with data-slot — a stable hook for structural touches. */

/* Page title: same sans as everything else, just bigger. */
[data-slot="status-title"] {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Each component row becomes a white card on the ivory canvas, like status.anthropic.com. */
[data-slot="status-component"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 2px rgb(31 30 29 / 0.04);
}

/* Compact uptime bars — the app hardcodes a 50px-tall bar row (h-[50px] utility);
 * our unlayered rule outranks Tailwind's layered one. */
[data-slot="status-bar"] {
  height: 26px;
}

.dark [data-slot="status-component"] {
  box-shadow: none;
}

/* Banner + events inherit the same rounding. */
[data-slot="status-banner"],
[data-slot="status-event-content"] {
  border-radius: var(--radius);
}
