/* Subtle Gradient — Color tokens
   Canonical values from the design spec's structured token block.
   Base palette first, semantic aliases second. */
:root {
  /* ---- Brand & accent ---- */
  --primary: #5b4df5;              /* signature CTA indigo — filled pills, link emphasis, mesh anchor */
  --primary-deep: #483cc8;         /* gradient mid-stop / hover */
  --primary-press: #312b83;        /* pressed-state lift */
  --primary-soft: #756af7;         /* product-UI accents, chart highlights */
  --primary-subdued: #c6c2fb;      /* pale indigo fill — soft tag background */
  --brand-dark-900: #20224f;       /* deep navy — featured tier, dashboard chrome */

  --ruby: #e84376;                 /* gradient accent + chart highlight — never a button */
  --magenta: #d96fe8;              /* brighter pink mesh stop */
  --lemon: #b47a34;                /* warm sherbet mesh stop */

  /* ---- Text (ink) ---- */
  --ink: #102a43;                  /* default body text — deep navy, never pure black */
  --ink-secondary: #334e68;        /* secondary text on white */
  --ink-mute: #6b7c93;             /* helper text, captions, table labels */
  --ink-mute-2: #62758d;           /* nav muted */
  --on-primary: #ffffff;           /* text on indigo / dark-navy surfaces */

  /* ---- Surface ---- */
  --canvas: #ffffff;               /* default page background */
  --canvas-soft: #f7f8fc;          /* cool off-white feature bands */
  --canvas-cream: #f7ecd9;         /* warm cream interlude band */

  /* ---- Lines ---- */
  --hairline: #e5e9f0;             /* 1px card + table borders */
  --hairline-input: #adc4da;       /* cooler hairline on form inputs */

  /* ---- Shadow base ---- */
  --shadow-blue: #163b63;          /* the tint all elevation shadows are built from */

  /* ---- Gradient mesh stops (upper-third backdrop) ---- */
  --mesh-cream: #f7ecd9;
  --mesh-sherbet: #f2c48a;         /* pastel lift of --lemon for the mesh */
  --mesh-lavender: #cdb8fb;
  --mesh-indigo: #756af7;
  --mesh-ruby: #f2739f;            /* pastel lift of --ruby for the mesh */

  /* ================= SEMANTIC ALIASES ================= */
  /* text */
  --text-body: var(--ink);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--ink-mute);
  --text-nav: var(--ink-mute-2);
  --text-on-dark: var(--on-primary);
  --text-link: var(--primary);

  /* surfaces */
  --surface-page: var(--canvas);
  --surface-soft: var(--canvas-soft);
  --surface-cream: var(--canvas-cream);
  --surface-card: var(--canvas);
  --surface-dark: var(--brand-dark-900);

  /* lines */
  --border-hairline: var(--hairline);
  --border-input: var(--hairline-input);

  /* action */
  --cta: var(--primary);
  --cta-hover: var(--primary-deep);
  --cta-press: var(--primary-press);
  --cta-on: var(--on-primary);
  --tag-bg: var(--primary-subdued);
  --tag-text: var(--primary-deep);
}