/* ==========================================================================
   baxcloud — TypstDrive skin (generic base; injected by Caddy)
   Modern retro: graphite, light blue = position, orange = action, square, flat.

   How to use:
   1. Paste this whole file into the service's custom-CSS setting (or mount it
      as its custom stylesheet).
   2. Add a short block at the end that maps the service's OWN colour variables
      onto the --bx-* ones below (see the example at the bottom). That mapping
      is what makes the app itself pick up the palette.
   3. Upload assets/Logos/baxcloud-mark.svg as its logo / favicon if it allows.
   Values match tokens.json; change them there first, then here.
   ========================================================================== */

:root {
  --bx-bg-000: #0a0a0b;
  --bx-bg-100: #111113;
  --bx-bg-200: #18181b;
  --bx-bg-300: #212125;
  --bx-bg-400: #2b2b30;
  --bx-line: #2b2b30;
  --bx-line-strong: #6b6b74;
  --bx-ink: #ededef;
  --bx-ink-muted: #a3a3ad;
  --bx-ink-faint: #82828c;
  --bx-sky-300: #a8ddff;
  --bx-sky-400: #5ec8ff;
  --bx-sky-500: #2fa9ec;
  --bx-sky-900: #102a3c;
  --bx-ember-300: #ffb07a;
  --bx-ember-400: #ff7a2e;
  --bx-ember-500: #e8620f;
  --bx-ember-900: #3a1e0d;
  --bx-on-accent: #111113;
  --bx-success: #4ade80;
  --bx-success-900: #0f2a1a;
  --bx-warning: #facc15;
  --bx-warning-900: #2d2607;
  --bx-error: #ff6b6b;
  --bx-error-900: #3a1416;
  --bx-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
  --bx-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}

/* square everywhere */
*, *::before, *::after { border-radius: 0 !important; }

html, body {
  background: var(--bx-bg-000);
  color: var(--bx-ink);
  font-family: var(--bx-font-sans);
}

h1, h2, h3, h4 { font-family: var(--bx-font-mono); font-weight: 600; letter-spacing: -.01em; }
code, pre, kbd, samp { font-family: var(--bx-font-mono); }

a { color: var(--bx-sky-400); }
a:hover { color: var(--bx-sky-300); }

::selection { background: var(--bx-sky-400); color: var(--bx-on-accent); }
:focus-visible { outline: 2px solid var(--bx-ember-400); outline-offset: 2px; }

/* form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  background: var(--bx-bg-100);
  border: 1px solid var(--bx-line-strong);
  color: var(--bx-ink);
  font-family: var(--bx-font-mono);
  caret-color: var(--bx-ember-400);
}
input::placeholder, textarea::placeholder { color: var(--bx-ink-faint); }
input[type="checkbox"], input[type="radio"], progress, input[type="range"] { accent-color: var(--bx-sky-400); }

/* buttons: plain = secondary, [type=submit] = primary.
   Give the ONE main action per page the orange via .bx-cta or a per-app rule. */
button, input[type="button"], input[type="submit"] {
  font-family: var(--bx-font-mono);
  font-weight: 500;
  letter-spacing: .02em;
  background: var(--bx-bg-300);
  color: var(--bx-ink);
  border: 1px solid var(--bx-line);
}
button:hover, input[type="button"]:hover { background: var(--bx-bg-400); }
button[type="submit"], input[type="submit"] { background: var(--bx-sky-400); color: var(--bx-on-accent); border-color: transparent; }
button[type="submit"]:hover, input[type="submit"]:hover { background: var(--bx-sky-300); }
.bx-cta { background: var(--bx-ember-400) !important; color: var(--bx-on-accent) !important; border-color: transparent !important; }
.bx-cta:hover { background: var(--bx-ember-300) !important; }

/* tables */
table { border-collapse: collapse; }
th {
  font: 500 11px/16px var(--bx-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bx-ink-muted);
  text-align: left;
}
th, td { border-bottom: 1px solid var(--bx-line); }
tbody tr:hover { background: var(--bx-bg-300); }

/* scrollbars */
* { scrollbar-color: var(--bx-bg-400) transparent; scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Per-app mapping — example shape. Replace the left-hand names with the
   service's own variables (look them up in its stylesheet with the browser's
   inspector), keep the right-hand side.

:root {
  --app-background:       var(--bx-bg-100);
  --app-surface:          var(--bx-bg-200);
  --app-hover:            var(--bx-bg-300);
  --app-border:           var(--bx-line);
  --app-text:             var(--bx-ink);
  --app-text-secondary:   var(--bx-ink-muted);
  --app-accent:           var(--bx-sky-400);
  --app-accent-text:      var(--bx-on-accent);
  --app-danger:           var(--bx-error);
}
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TypstDrive mapping (2026-10-23). TypstDrive themes everything through
   --color-* variables, one set per colour theme (Catppuccin, Cerberus,
   Arch Linux, high contrast). In dark mode all of them are overridden with
   the baxcloud palette; light mode stays as a fallback.
   -------------------------------------------------------------------------- */
:root[data-theme='dark'],
:root[data-theme='dark'][data-color-theme],
:root[data-theme='dark'][data-contrast],
html.dark {
  --color-surface:        var(--bx-bg-100) !important;
  --color-surface-muted:  var(--bx-bg-200) !important;
  --color-surface-sunken: var(--bx-bg-300) !important;
  --color-line:           var(--bx-line) !important;
  --color-ink:            var(--bx-ink) !important;
  --color-ink-muted:      var(--bx-ink-muted) !important;
  --color-accent:         var(--bx-sky-400) !important;
  --color-accent-soft:    var(--bx-sky-900) !important;
  --color-danger:         #ff6b6b !important;
  --color-success:        #4ade80 !important;
}