/* Remoby — Color tokens
   Extracted verbatim from the Remoby marketing frames (Batch A–D).
   The palette is a slate-neutral system with three brand accents:
   electric blue (links/eyebrows), amber (primary action + logo),
   and near-black navy (text + dark surfaces). */

:root {
  /* ---- Brand ---- */
  --remoby-blue: rgb(91, 124, 255);        /* #5B7CFF — eyebrows, links, testimonial names */
  --remoby-amber: rgb(245, 158, 11);       /* #F59E0B — primary buttons, highlights */
  --remoby-amber-accent: rgb(242, 168, 29);/* #F2A81D — logo arrow marks */
  --remoby-navy: rgb(17, 24, 39);          /* #111827 — primary text, dark surfaces, footer */
  --remoby-navy-deep: rgb(0, 26, 58);      /* #001A3A — FAQ / deep-blue headings */
  --remoby-navy-slate: rgb(34, 45, 68);    /* #222D44 — feature-card dark surface */

  /* ---- Neutrals (slate ramp) ---- */
  --slate-50:  rgb(248, 250, 252);   /* #F8FAFC — page background */
  --slate-100: rgb(241, 245, 249);   /* #F1F5F9 — subtle surface / muted cards */
  --slate-200: rgb(226, 232, 240);   /* #E2E8F0 — borders, hairlines */
  --slate-300: rgb(203, 213, 225);   /* #CBD5E1 — hero gradient stop */
  --slate-400: rgb(148, 163, 184);   /* #94A3B8 — placeholder / faint icons */
  --slate-600: rgb(71, 85, 105);     /* #475569 — secondary text */
  --grey-500:  rgb(144, 144, 144);   /* #909090 — muted labels inside cards */
  --white:     rgb(255, 255, 255);

  /* ---- Category tint tokens (Content Hub tags) ---- */
  --tag-purple-bg: rgba(160, 114, 233, 0.1);   --tag-purple-fg: rgb(71, 46, 152);
  --tag-blue-bg:   rgba(91, 124, 255, 0.1);    --tag-blue-fg:   rgb(91, 124, 255);
  --tag-amber-bg:  rgba(245, 158, 11, 0.12);   --tag-amber-fg:  rgb(180, 111, 4);
  --tag-slate-bg:  rgba(71, 85, 105, 0.1);     --tag-slate-fg:  rgb(71, 85, 105);

  /* ---- Semantic surfaces ---- */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-subtle:  var(--slate-100);
  --surface-dark:    var(--remoby-navy);
  --surface-feature: var(--remoby-navy-slate);

  /* ---- Borders ---- */
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);

  /* ---- Text ---- */
  --text-primary:        var(--remoby-navy);
  --text-secondary:      var(--slate-600);
  --text-muted:          var(--grey-500);
  --text-accent:         var(--remoby-blue);
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.8);
  --text-on-dark-faint:  rgba(255, 255, 255, 0.6);

  /* ---- Action ---- */
  --action-primary-bg:    var(--remoby-amber);
  --action-primary-fg:    var(--remoby-navy);
  --action-secondary-bg:  var(--remoby-navy);
  --action-secondary-fg:  var(--white);
  --action-white-bg:      var(--white);
  --action-white-fg:      var(--remoby-navy);

  /* ---- Hero gradient ---- */
  --hero-gradient: linear-gradient(180deg, var(--slate-100) 51.83%, var(--slate-300) 108.59%);
}