/* ============================================================
   Doubleslash Studio — Colour tokens
   Purple-forward palette. Ink + electric drive everything;
   magenta is the single call-to-action accent.
   ============================================================ */
:root {
  /* ---- Base palette ---------------------------------------- */
  --ink: #2d0045;        /* dark purple — primary brand + headings   */
  --electric: #5500f4;   /* electric purple — links, focus, accents  */
  --magenta: #cd236c;    /* accent — buttons, CTAs, active states    */
  --orchid: #e472b7;     /* supporting — labels on dark surfaces     */
  --burgundy: #780030;   /* supporting — deep accent gradients       */
  --canvas: #f7f5fb;     /* light background — the default page bg   */
  --footer: #1c002d;     /* deep footer / darkest surface            */
  --body-ink: #3a2b47;   /* body copy on light                       */
  --white: #ffffff;

  /* ---- Semantic aliases ------------------------------------ */
  --surface-page: var(--canvas);
  --surface-card: var(--white);
  --surface-dark: var(--ink);
  --surface-footer: var(--footer);

  --text-heading: var(--ink);
  --text-body: var(--body-ink);
  --text-on-dark: var(--white);
  --text-muted: rgba(45, 0, 69, 0.6);        /* ink @ 60% */
  --text-muted-dark: rgba(255, 255, 255, 0.6);/* white @ 60% on dark */

  --accent: var(--magenta);
  --link: var(--electric);

  --border: rgba(45, 0, 69, 0.1);            /* hairline on light */
  --border-strong: rgba(45, 0, 69, 0.2);     /* input borders */
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Brand gradients ------------------------------------- */
  --grad-mark: linear-gradient(135deg, var(--ink), var(--electric));
  --grad-mark-tri: linear-gradient(135deg, var(--ink), var(--electric) 60%, var(--magenta));
  --grad-art-a: linear-gradient(140deg, var(--ink), var(--electric));
  --grad-art-b: linear-gradient(140deg, var(--electric), var(--magenta));
  --grad-art-burgundy: linear-gradient(150deg, var(--burgundy), var(--magenta));
}