/* ============================================================================
   BlackGATE theme for the Cachet 3 public status page
   ----------------------------------------------------------------------------
   Written 2026-10-22 against:
     cachethq/core   15537cdf85d51fa14fa612940778e919f26f1c82  (2026-10-16)
     cachethq/cachet 40bd0819ee46ee7094c336a1240a2a7a1291ccb8  (3.x, 2026-10-05)
   Values copied from this repo's blackgate.css at 655991a.

   Cachet 3 is UNRELEASED. cachethq/core says `3.x-dev` and main moves daily.
   Every selector below names the Cachet file it targets, so a class rename
   upstream can be found by grepping that file at a newer sha. In comments,
   "core@15537cd" means cachethq/core at the sha above.

   Plain CSS on purpose: no @apply, no @theme, no @import, so the same file
   works with and without a Tailwind build.

   USE (a): pure override, no build. Try this first.
     1. Copy this file and the fonts/ folder next to it into the Cachet app's
        public/ directory (NOT public/vendor/cachethq/cachet, `composer
        update` force-republishes that):
          public/blackgate/cachet-blackgate.css
          public/blackgate/fonts/mulish-latin-wght-normal.woff2
          public/blackgate/fonts/quicksand-latin-wght-normal.woff2
        fonts/ here is a copy of this repo's fonts/ at 655991a. If those
        change, copy them again.
        The @font-face URLs below are absolute (/blackgate/fonts/...). If
        Cachet is served under a sub-path, edit those two URLs.
     2. Status page: Dashboard > Settings > Customization > Stylesheet, paste
        this whole file. core@15537cd resources/views/components/cachet.blade.php
        prints it in a <style> after the compiled CSS and the theme colours.
        (A <link> in the Customization "Header" field also works: selectors are
        specificity-bumped so they win even though Header prints earlier.)
     3. Light mode only: paste header-light-only.html (next to this file)
        into Customization > Header. Without it, visitors whose OS is dark
        get Cachet's dark rules mixed with these light colours.
   USE (b): fold into the build. Same file, no code changes, but note what
   "build" means here: the 3.x app has no CSS build of its own, it ships
   cachethq/core's prebuilt public/build. Building = patching cachethq/core.
     Add `@import './cachet-blackgate.css';` next to the existing @imports in
     resources/css/cachet.css, then build core. Everything here is unlayered,
     so it beats Tailwind's @layer output wherever it lands. A cleaner (b)
     would edit Cachet's @theme in place and drop most of layer 2. That is a
     fork, not this file.

   NOT STYLED: the Filament dashboard (admins only, by decision). This file is
   never printed there: the Customization stylesheet only reaches the public
   layout.

   LIGHT MODE ONLY (decision 2026-10-22: the public website is light only):
     Cachet goes dark on the OS setting: Tailwind `dark:` compiles to
     @media (prefers-color-scheme: dark) (161 rules in the shipped
     cachet-*.css, zero `.dark` selectors) and ThemeData.php emits dark
     --accent* in the same media query. This file has no dark rules at all
     and sets color-scheme: light only for native controls. Switching
     Cachet's own dark rules off is not possible in CSS; header-light-only.html
     does it. In use (b) a build can do it instead: add
     `@custom-variant dark (&:where(.dark, .dark *));` to cachet.css (the
     page never sets .dark) and delete its hand-written
     @media (prefers-color-scheme: dark) block. ThemeData's dark --accent*
     needs nothing: this file's html:root already wins over it.
     What wins: unlayered rules beat every Tailwind/Filament @layer rule. The
     unlayered competitors are ThemeData's and @filamentStyles' <style>
     blocks on :root (0,1,0); ours is html:root (0,1,1).
   ========================================================================= */

@font-face {
	font-family: 'Mulish Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 1000;
	src: url('/blackgate/fonts/mulish-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Quicksand Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url('/blackgate/fonts/quicksand-latin-wght-normal.woff2') format('woff2-variations');
}

/* ---------------------------------------------------------------------------
   Layer 1: tokens.
   BlackGATE's raw --accent / --accent-foreground are NOT copied: Cachet owns
   those names (brand fill). BlackGATE's hover wash is renamed --bg-wash.
   ------------------------------------------------------------------------ */
html:root {
	color-scheme: light only;

	/* BlackGATE semantic tokens (blackgate.css :root), only the ones used here */
	--background: #fff7e8;
	--surface: #ffffff;
	--primary: #f07d35;
	--primary-foreground: #ffffff;
	--link: #2a65aa;
	--ring: #2a65aa;
	--border: #e7ded0;
	--sh-md: 0 6px 18px rgb(43 56 143 / 0.06), 0 2px 6px rgb(43 56 143 / 0.05);
	--font-display: 'Quicksand Variable', 'Mulish Variable', ui-sans-serif, system-ui, sans-serif;

	/* Font: Tailwind's --default-font-family reads --font-sans. */
	--font-sans: 'Mulish Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Cachet --accent* (core@15537cd src/Data/Cachet/ThemeData.php compileCss).
	   accent-content is used almost only for links (prose-a, subscribe link,
	   title hovers), so it maps to BlackGATE's blue link, not orange text.
	   --accent is --primary written as rgb(): metrics.js adds chart alpha by
	   inserting before the closing ")", which a hex value does not have. */
	--accent: rgb(240 125 53);
	--accent-foreground: var(--primary-foreground);
	--accent-content: var(--link);
	--accent-background: var(--background);

	/* Primary ramp, BlackGATE orange, every step an existing BlackGATE value.
	   --color-primary-*: Cachet's @theme (core@15537cd resources/css/cachet.css).
	   --primary-*: Filament's colour, emitted by @filamentStyles, read by the
	   Filament support CSS that cachet.css bundles for the status page. */
	--color-primary-50: #fff7e8;
	--color-primary-100: #ffecc9;
	--color-primary-200: #ffe3ad;
	--color-primary-300: #f3c477;
	--color-primary-400: #f8ad40;
	--color-primary-500: #f07d35;
	--color-primary-600: #d8692a;
	--color-primary-700: #bc510e;
	--color-primary-800: #97441a;
	--color-primary-900: #59301b;
	--primary-50: #fff7e8;
	--primary-100: #ffecc9;
	--primary-200: #ffe3ad;
	--primary-300: #f3c477;
	--primary-400: #f8ad40;
	--primary-500: #f07d35;
	--primary-600: #d8692a;
	--primary-700: #bc510e;
	--primary-800: #97441a;
	--primary-900: #59301b;
	--primary-950: #331a0e;

	/* Neutral ramp: Cachet paints the status page with zinc-* utilities, the
	   bundled Filament support CSS uses gray-* (gray = Zinc in
	   CachetDashboardServiceProvider). Both become BlackGATE's warm neutrals.
	   Low steps are surfaces and borders, high steps are text. */
	--color-zinc-50: #fdf3e2;
	--color-zinc-100: #f3ece0;
	--color-zinc-200: #e7ded0;
	--color-zinc-300: #d3c8b6;
	--color-zinc-400: #9aa3b2;
	--color-zinc-500: #5d6572;
	--color-zinc-600: #4f5866;
	--color-zinc-700: #3d4a5c;
	--color-zinc-800: #2a3444;
	--color-zinc-900: #1c2430;
	--color-zinc-950: #14181f;
	--gray-50: #fdf3e2;
	--gray-100: #f3ece0;
	--gray-200: #e7ded0;
	--gray-300: #d3c8b6;
	--gray-400: #9aa3b2;
	--gray-500: #5d6572;
	--gray-600: #4f5866;
	--gray-700: #3d4a5c;
	--gray-800: #2a3444;
	--gray-900: #1c2430;
	--gray-950: #14181f;

	/* BlackGATE status tones (blackgate.css :root layer 3), the six used here.
	   Read by layer 2b and the palette block below. */
	--status-active: #2ea05a;
	--status-active-surface: #e4f1e6;
	--status-active-foreground: #1e6a3d;
	--status-active-border: #c2e0c8;
	--status-completed: #2a65aa;
	--status-completed-surface: #e3ecf7;
	--status-completed-foreground: #1f4d80;
	--status-completed-border: #c1d5ea;
	--status-pending: #f8ad40;
	--status-pending-surface: #fdeed0;
	--status-pending-foreground: #8a5712;
	--status-pending-border: #f3d9a3;
	--status-warning: #d8692a;
	--status-warning-surface: #fbe3d5;
	--status-warning-foreground: #97441a;
	--status-warning-border: #f0c1a2;
	--status-failed: #c8402f;
	--status-failed-surface: #fae2de;
	--status-failed-foreground: #972e22;
	--status-failed-border: #f0beb6;
	--status-inactive: #5d6572;
	--status-inactive-surface: #eee8dd;
	--status-inactive-foreground: #4f5866;
	--status-inactive-border: #dbd1c1;
}

/* Tailwind palette steps that Cachet uses for status (uptime bars,
   component status text) and destructive red, light steps only.
   core@15537cd src/Enums/ComponentStatusEnum.php getTextColorClasses(),
   resources/views/components/system-status-day.blade.php,
   status-page/subscribe.blade.php, status-page/unsubscribe.blade.php. */
html:root {
	--color-emerald-500: var(--status-active); /* operational bar + icon */
	--color-green-600: var(--status-active-foreground); /* operational */
	--color-purple-600: var(--status-warning-foreground); /* performance issues */
	--color-amber-600: var(--status-warning-foreground); /* partial outage */
	--color-amber-400: var(--status-warning); /* degraded bar + icon */
	--color-orange-600: var(--status-pending-foreground); /* under maintenance */
	--color-red-600: var(--status-failed); /* major outage, form errors, unsubscribe button */
	--color-red-500: var(--status-failed); /* major outage bar + icon, button hover */
	--color-blue-600: var(--status-inactive-foreground); /* unknown */
}

/* ---------------------------------------------------------------------------
   Layer 2a: Only where Cachet hard-codes a colour or font.
   ------------------------------------------------------------------------ */

/* core@15537cd resources/css/cachet.css .status-header (header.blade.php):
   white 70% glass and zinc hairline. */
html .status-header {
	border-color: var(--border);
	background: color-mix(in srgb, var(--background) 80%, transparent);
}

/* core@15537cd resources/css/cachet.css .status-overview (status-page/index.blade.php):
   white card, zinc border, black shadow. BlackGATE card: surface, 1rem, blue shadow. */
html .status-overview {
	border-color: var(--border);
	border-radius: 1rem;
	background: var(--surface);
	box-shadow: var(--sh-md);
}

/* core@15537cd resources/css/cachet.css .status-overview__masthead, .status-summary:
   zinc hairlines. */
html .status-overview__masthead,
html .status-summary {
	border-color: var(--border);
}

/* core@15537cd resources/views/components/*.blade.php, status-page/*.blade.php:
   headings are utility-only, no font token reaches them. BlackGATE headings
   are Quicksand. body[data-page] is set in components/cachet.blade.php. */
body[data-page] :is(h1, h2, h3, h4) {
	font-family: var(--font-display);
}

/* core@15537cd components/header.blade.php, status-page/subscribe.blade.php:
   focus-visible:outline-accent and focus:ring-accent would be orange.
   BlackGATE focus is blue. */
body[data-page] :focus-visible {
	outline-color: var(--ring);
}
body[data-page] [data-component='subscribe'] input:focus {
	--tw-ring-color: var(--ring);
}

/* ---------------------------------------------------------------------------
   Layer 2b: status colours on the status page, as BlackGATE status tones.
   Cachet prints each status as an inline style="--color-50..950: <hue>",
   from PHP enums through Filament (filament/support v5.9.0, the version
   cachethq/cachet 3.x locks). No CSS variable reaches an inline style, so:
     1. a tone rule recognises the hue by its 400 shade (Filament Color.php
        values) inside a known component, and names a tone in --s-*;
     2. one generic rule rewrites the shades from --s-* with !important,
        which beats a normal inline declaration.
   A hue with no tone rule falls back to `inactive`, never to nothing.
   Two inline formats exist: get_color_css_variables() writes
   "--color-400:oklch(...)", Filament badges write "--color-400: oklch(...)".
   ------------------------------------------------------------------------ */

/* System status bar. core@15537cd components/status-bar.blade.php,
   src/Enums/SystemStatusEnum.php getColor(). */
html [data-component='status-summary'][style*='--color-400:oklch(0.792 0.209 151.711)'] /* Green: operational */ {
	--s-surface: var(--status-active-surface);
	--s-border: var(--status-active-border);
	--s-accent: var(--status-active);
	--s-fg: var(--status-active-foreground);
}
html [data-component='status-summary'][style*='--color-400:oklch(0.828 0.189 84.429)'] /* Amber: partial outage */ {
	--s-surface: var(--status-warning-surface);
	--s-border: var(--status-warning-border);
	--s-accent: var(--status-warning);
	--s-fg: var(--status-warning-foreground);
}
html [data-component='status-summary'][style*='--color-400:oklch(0.704 0.191 22.216)'] /* Red: major outage */ {
	--s-surface: var(--status-failed-surface);
	--s-border: var(--status-failed-border);
	--s-accent: var(--status-failed);
	--s-fg: var(--status-failed-foreground);
}
html [data-component='status-summary'][style*='--color-400:oklch(0.75 0.183 55.934)'] /* Orange: under maintenance */ {
	--s-surface: var(--status-pending-surface);
	--s-border: var(--status-pending-border);
	--s-accent: var(--status-pending);
	--s-fg: var(--status-pending-foreground);
}

/* Incident update chip. core@15537cd components/incident-update-status.blade.php,
   src/Enums/IncidentStatusEnum.php getColor(). Red (unknown) uses the fallback. */
html [data-component='incident-update-status'][style*='--color-400:oklch(0.707 0.165 254.624)'] /* Blue: investigating */,
html [data-component='incident-update-status'][style*='--color-400:oklch(0.714 0.203 305.504)'] /* Purple: identified */ {
	--s-surface: var(--status-warning-surface);
	--s-border: var(--status-warning-border);
	--s-accent: var(--status-warning);
	--s-fg: var(--status-warning-foreground);
}
html [data-component='incident-update-status'][style*='--color-400:oklch(0.828 0.189 84.429)'] /* Amber: watching */ {
	--s-surface: var(--status-pending-surface);
	--s-border: var(--status-pending-border);
	--s-accent: var(--status-pending);
	--s-fg: var(--status-pending-foreground);
}
html [data-component='incident-update-status'][style*='--color-400:oklch(0.792 0.209 151.711)'] /* Green: fixed */ {
	--s-surface: var(--status-completed-surface);
	--s-border: var(--status-completed-border);
	--s-accent: var(--status-completed);
	--s-fg: var(--status-completed-foreground);
}

/* Schedule badge (Filament badge). core@15537cd components/badge.blade.php,
   src/Enums/ScheduleStatusEnum.php getColor(). */
html [data-component='badge'][style*='--color-400: oklch(0.707 0.165 254.624)'] /* Blue: upcoming */ {
	--s-surface: var(--status-pending-surface);
	--s-border: var(--status-pending-border);
	--s-accent: var(--status-pending);
	--s-fg: var(--status-pending-foreground);
}
html [data-component='badge'][style*='--color-400: oklch(0.828 0.189 84.429)'] /* Amber: in progress */ {
	--s-surface: var(--status-active-surface);
	--s-border: var(--status-active-border);
	--s-accent: var(--status-active);
	--s-fg: var(--status-active-foreground);
}
html [data-component='badge'][style*='--color-400: oklch(0.792 0.209 151.711)'] /* Green: complete */ {
	--s-surface: var(--status-completed-surface);
	--s-border: var(--status-completed-border);
	--s-accent: var(--status-completed);
	--s-fg: var(--status-completed-foreground);
}

/* Tone to shades. Light: low shades are tints, high shades are text, which
   is how status-bar, the incident chip and Filament's badge CSS use them. */
body[data-page] :is([data-component='status-summary'], [data-component='incident-update-status'], [data-component='badge'])[style*='--color-400'] {
	--color-50: var(--s-surface, var(--status-inactive-surface)) !important;
	--color-100: var(--s-surface, var(--status-inactive-surface)) !important;
	--color-200: var(--s-border, var(--status-inactive-border)) !important;
	--color-300: var(--s-border, var(--status-inactive-border)) !important;
	--color-400: var(--s-accent, var(--status-inactive)) !important;
	--color-500: var(--s-accent, var(--status-inactive)) !important;
	--color-600: var(--s-fg, var(--status-inactive-foreground)) !important;
	--color-700: var(--s-fg, var(--status-inactive-foreground)) !important;
	--color-800: var(--s-fg, var(--status-inactive-foreground)) !important;
	--color-900: var(--s-fg, var(--status-inactive-foreground)) !important;
	--color-950: var(--s-fg, var(--status-inactive-foreground)) !important;
}

/* Filament's badge picks its text shade by contrast against the ORIGINAL hue
   (filament/support src/View/Components/BadgeComponent.php), so the shade it
   lands on is unknown here. Set the text directly. */
body[data-page] [data-component='badge'][style*='--color-400'] {
	--text: var(--s-fg, var(--status-inactive-foreground)) !important;
}