/* The Usual Shenanigans: design tokens (Flare palette) */

:root {
  /* Colour: 60 / 30 / 10 */
  --night: #0F0E0D;              /* dominant: page background */
  --smoke: #2A2522;              /* secondary: solid surfaces */
  --flare: #FF6B2C;              /* accent: primary call to action only */
  --on-flare: #1A0A02;           /* text on --flare */
  --flare-text: #FF9A6B;         /* accent as text and links on dark */
  --flare-text-hover: #FFC2A3;

  /* Text on dark */
  --text-strong: #F7F0E9;
  --text: #F3ECE6;
  --text-body: #E4D8CE;
  --text-soft: #CABDB2;
  --text-muted: #C2B5AA;
  --hairline: rgba(255, 255, 255, 0.10);
  --focus: #FFC2A3;

  /* Status: functional only, never decorative, always with a text label */
  --status-online: #3DDC84;
  --status-warn: #F5A524;        /* degraded, investigating, monitoring */
  --status-down: #FF5A5A;
  --status-down-text: #FF8A8A;   /* down as text on a tinted pill (4.5:1) */

  /* Glass */
  --glass-tint: rgba(22, 19, 17, 0.46);        /* cards with text */
  --glass-tint-light: rgba(28, 24, 22, 0.36);  /* nav */
  --glass-hover: rgba(48, 41, 37, 0.55);
  --glass-blur: 18px;
  --glass-fallback: rgba(32, 28, 25, 0.94);

  /* Type */
  --font: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;

  /* Shape and layout */
  --radius-pill: 999px;
  --radius-card: 22px;
  --content-max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* Glass: tinted, blurred, with a top-left highlight and a firelit edge */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 50px rgba(0, 0, 0, 0.35);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  z-index: -1;
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.07) 35%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 140, 80, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-fallback); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--flare {
  padding: 0 28px;
  border: 0;
  background: var(--flare);
  color: var(--on-flare);
  font-weight: 700;
  box-shadow: 0 10px 34px rgba(255, 107, 44, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--flare:hover { color: var(--on-flare); filter: brightness(1.08); }
.btn--glass { border: 0; background: rgba(28, 24, 22, 0.40); color: var(--text); }
.btn--glass:hover { background: var(--glass-hover); color: #FFFFFF; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }

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