/* Dilook color system
   60 / 30 / 10 usage: purple dominant, blue secondary, magenta accent.
   Ring accents (orange/green) are for the rainbow-ring motif ONLY. */
:root {
  /* --- Brand base --- */
  --purple: #635081;        /* Primary 60% — wordmark, dominant surfaces */
  --purple-600: #54446e;    /* hover / pressed */
  --purple-700: #453860;
  --purple-050: #F1EEF6;    /* purple tint surface */

  --blue: #569cd4;          /* Secondary 30% — blocks, cards, links */
  --blue-600: #3f86bf;      /* darkened for text/hover, AA-safe */
  --blue-050: #EAF3FB;

  --magenta: #bc357e;       /* Accent 10% — CTAs, highlights, focus */
  --magenta-600: #a52a6c;   /* hover / pressed, AA-safe on white */
  --magenta-050: #FBEAF3;

  /* --- Ring accents (motif only, never flat UI fills) --- */
  --ring-orange: #d38343;
  --ring-green: #68a03b;
  --ring-yellow: #f2c94c;

  /* --- Neutrals --- */
  --white: #ffffff;
  --bg: #ffffff;             /* page background */
  --bg-tint: #F7F5FA;        /* subtle purple-tinted card background */
  --ink: #1A1A1A;            /* primary text */
  --ink-2: #6B6470;          /* secondary text */
  --line: #E9E5EF;           /* hairline borders */
  --ink-ink: #191424;        /* near-black brand surface (dark blocks) */

  /* --- Semantic aliases --- */
  --brand: var(--purple);
  --text-strong: var(--ink);
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-on-brand: var(--white);
  --link: var(--blue-600);
  --link-hover: var(--magenta-600);
  --surface: var(--bg);
  --surface-card: var(--bg-tint);
  --surface-purple: var(--purple);
  --surface-blue: var(--blue);
  --surface-dark: var(--ink-ink);
  --border: var(--line);
  --focus: var(--magenta);

  /* --- Signature rainbow ring gradient (motif accents only) --- */
  --ring-gradient: conic-gradient(from 210deg,
    var(--ring-yellow),
    var(--ring-orange),
    var(--magenta),
    var(--purple),
    var(--blue),
    var(--ring-green),
    var(--ring-yellow));
  --ring-sweep: linear-gradient(90deg,
    var(--ring-yellow), var(--ring-orange), var(--magenta),
    var(--blue), var(--ring-green));
}