/* bix.css — the shared look for every bix.computer app.
 *
 * Served at https://bix.computer/bix.css (from the `bix` repo). Link it before
 * an app's own styles:
 *
 *   <link rel="stylesheet" href="https://bix.computer/bix.css">
 *
 * Palette is Catppuccin: Mocha (dark) is the default; Latte (light) applies
 * under [data-theme="light"] or .latte for apps that offer a light mode.
 * Apps should use the semantic tokens (--bix-bg, --bix-text, --bix-accent…)
 * and keep a literal fallback, e.g. var(--bix-bg, #1e1e2e), so they still
 * render if this file fails to load. Design rules: bix-infra/CLAUDE.md,
 * "Design system".
 */

:root {
  /* Catppuccin Mocha */
  --ctp-crust: #11111b;  --ctp-mantle: #181825;  --ctp-base: #1e1e2e;
  --ctp-surface0: #313244; --ctp-surface1: #45475a; --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086; --ctp-overlay1: #7f849c; --ctp-overlay2: #9399b2;
  --ctp-subtext0: #a6adc8; --ctp-subtext1: #bac2de; --ctp-text: #cdd6f4;
  --ctp-rosewater: #f5e0dc; --ctp-flamingo: #f2cdcd; --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;     --ctp-red: #f38ba8;      --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;     --ctp-yellow: #f9e2af;   --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;      --ctp-sky: #89dceb;      --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;      --ctp-lavender: #b4befe;

  /* Semantic tokens — use these in apps */
  --bix-bg:          var(--ctp-base);      /* page */
  --bix-bg-sunken:   var(--ctp-mantle);    /* wells, code blocks, sidebars */
  --bix-bg-deep:     var(--ctp-crust);     /* strips, bands, deepest insets */
  --bix-surface:     var(--ctp-surface0);  /* raised panels, inputs */
  --bix-surface-2:   var(--ctp-surface1);  /* hover on surface */
  --bix-border:      var(--ctp-surface0);  /* hairlines */
  --bix-border-strong: var(--ctp-surface1);
  --bix-text:        var(--ctp-text);
  --bix-text-soft:   var(--ctp-subtext0);  /* body copy, secondary */
  --bix-text-muted:  var(--ctp-overlay1);  /* descriptions, gated names */
  --bix-text-faint:  var(--ctp-overlay0);  /* labels, site name */
  --bix-accent:      var(--ctp-peach);     /* the one accent: full stops, links */
  --bix-on-accent:   var(--ctp-crust);     /* text on an accent fill */
  --bix-danger:      var(--ctp-red);
  --bix-ok:          var(--ctp-green);
  --bix-warn:        var(--ctp-yellow);

  --bix-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bix-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* Catppuccin Latte — the light twin, for apps with a light mode */
[data-theme="light"], .latte {
  --ctp-crust: #dce0e8;  --ctp-mantle: #e6e9ef;  --ctp-base: #eff1f5;
  --ctp-surface0: #ccd0da; --ctp-surface1: #bcc0cc; --ctp-surface2: #acb0be;
  --ctp-overlay0: #9ca0b0; --ctp-overlay1: #8c8fa1; --ctp-overlay2: #7c7f93;
  --ctp-subtext0: #6c6f85; --ctp-subtext1: #5c5f77; --ctp-text: #4c4f69;
  --ctp-rosewater: #dc8a78; --ctp-flamingo: #dd7878; --ctp-pink: #ea76cb;
  --ctp-mauve: #8839ef;     --ctp-red: #d20f39;      --ctp-maroon: #e64553;
  --ctp-peach: #fe640b;     --ctp-yellow: #df8e1d;   --ctp-green: #40a02b;
  --ctp-teal: #179299;      --ctp-sky: #04a5e5;      --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;      --ctp-lavender: #7287fd;
  --bix-on-accent: #eff1f5;
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  background: var(--bix-bg);
  color: var(--bix-text);
  font-family: var(--bix-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Primitives (opt-in classes) ──────────────────────────────────────── */

/* Small grey site name / breadcrumb at the top of a page: "bix.computer / blog" */
.bix-site { font-size: 0.85rem; color: var(--bix-text-faint); }
.bix-site a { color: inherit; text-decoration: none; transition: color 0.2s; }
.bix-site a:hover { color: var(--bix-text); }
.bix-site .sep { margin: 0 0.5em; color: var(--bix-border-strong); }

/* Titles: light weight, tight tracking, ending in an accent full stop:
   <h1 class="bix-title">BeatShare<i class="bix-dot">.</i></h1> */
.bix-title {
  font-family: var(--bix-sans);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.bix-dot { font-style: normal; color: var(--bix-accent); }

/* Small uppercase section label */
.bix-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bix-text-faint);
}

/* Hairline divider */
.bix-rule { border: 0; border-top: 1px solid var(--bix-border); }

/* Text link with an accent underline (for prose) */
.bix-link {
  color: var(--bix-text);
  text-decoration: underline;
  text-decoration-color: var(--bix-accent);
  text-underline-offset: 0.18em;
}
.bix-link:hover { color: var(--bix-accent); }

/* Primary button: accent fill, dark text */
.bix-button {
  font: 500 0.9rem var(--bix-sans);
  background: var(--bix-accent);
  color: var(--bix-on-accent);
  border: 0;
  border-radius: 6px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}
.bix-button:hover { filter: brightness(1.08); }