:root {
  /* ---- Brand gradient (fixed identity, never re-hued) ---- */
  --brand-rose: #D6265C;
  --brand-ember: #F0743F;
  --brand-amber: #F7CE3F;
  --brand-rose-deep: #B01C4B;
  --brand-amber-deep: #C89A1E;
  --gradient-brand: linear-gradient(95deg, var(--brand-rose), var(--brand-ember));
  --gradient-brand-full: linear-gradient(90deg, var(--brand-rose), var(--brand-ember), var(--brand-amber));
  --gradient-brand-diag: linear-gradient(140deg, var(--brand-rose), var(--brand-ember) 62%, var(--brand-amber));

  /* ---- Ink ramp (the brand's default ground) ---- */
  --ink-900: #0B0C0F;
  --ink-850: #101216;
  --ink-800: #161A20;
  --ink-700: #1E232B;
  --ink-600: #2A2F39;
  --ink-500: #3A404B;

  /* ---- Bone ramp (warm relief surfaces) ---- */
  --bone-50: #F8F6F3;
  --bone-100: #F1EDE7;
  --bone-200: #E3DDD3;
  --bone-300: #CFC8BC;

  /* ---- Accent tints ---- */
  --rose-tint: rgba(214, 38, 92, 0.09);
  --rose-tint-strong: rgba(214, 38, 92, 0.18);
  --ember-tint: rgba(240, 116, 63, 0.09);
  --amber-tint: rgba(247, 206, 63, 0.12);
  --glass-light: rgba(255, 255, 255, 0.06);
  --glass-light-2: rgba(255, 255, 255, 0.10);

  /* ---- Semantic: text ---- */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: rgba(255, 255, 255, 0.52);
  --text-accent: var(--brand-amber);
  --text-on-bone-primary: #101216;
  --text-on-bone-secondary: #4A4F58;
  --text-on-bone-tertiary: #767C86;
  --text-on-bone-accent: var(--brand-rose);
  --text-muted-negative: #8E949E;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--ink-900);
  --surface-raised: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-card-hover: var(--ink-700);
  --surface-relief: var(--bone-50);
  --surface-relief-card: #FFFFFF;
  --surface-relief-sunken: var(--bone-100);
  --surface-input: rgba(255, 255, 255, 0.05);
  --surface-input-relief: #FFFFFF;

  /* ---- Semantic: borders ---- */
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --border-relief-subtle: var(--bone-200);
  --border-relief-strong: var(--bone-300);
  --border-focus: var(--brand-ember);

  /* ---- Ambient washes (the only place gradient becomes a background) ---- */
  --wash-ink-rose: radial-gradient(60% 85% at 88% -10%, rgba(214,38,92,0.22), transparent 62%); /* @kind color */
  --wash-ink-amber: radial-gradient(50% 70% at 0% 105%, rgba(247,206,63,0.10), transparent 62%); /* @kind color */
  --wash-bone: radial-gradient(ellipse 720px 420px at 92% -8%, rgba(214,38,92,0.05), transparent 60%), radial-gradient(ellipse 620px 460px at -6% 108%, rgba(247,206,63,0.08), transparent 62%); /* @kind color */
}
