/* ExBrain color tokens — source: exbrain-ds/SKILL.md + references/tokens.md */
:root {
  /* Signature cyan — graphic only, 2.4:1 on white (do NOT use for body text) */
  --brand:        #28BFBA;                    /* Cyan / 500 */
  --brand-strong: oklch(45% 0.10 190);        /* Cyan / 700 — AA 5.1:1 on white; text/links */
  --brand-dark:   oklch(32% 0.07 195);        /* Cyan / 900 — dark surface / deepest accent */
  --brand-glow:   oklch(74% 0.11 190 / 0.18); /* transparent glow for shadows */

  /* Ink + paper — deliberate teal undertone (hue 200) */
  --ink:    oklch(18% 0.012 200);   /* primary text / dark surfaces — AAA 16.2:1 on paper */
  --ink-2:  oklch(28% 0.012 200);   /* secondary text */
  --ink-3:  oklch(42% 0.010 200);   /* muted text, captions */
  --ink-4:  oklch(62% 0.008 200);   /* disabled / placeholder */
  --rule:   oklch(88% 0.006 200);   /* borders, dividers */
  --rule-2: oklch(92% 0.005 200);   /* subtle dividers */
  --paper:  oklch(98.5% 0.004 200); /* default page background */
  --paper-2:oklch(96% 0.005 200);   /* secondary surface, inputs */
  --white:  #ffffff;                /* cards, reverse */

  /* Semantic aliases */
  --text-body:      var(--ink-2);
  --text-heading:   var(--ink);
  --text-muted:     var(--ink-3);
  --text-disabled:  var(--ink-4);
  --text-link:      var(--brand-strong);
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-input:  var(--paper-2);
  --surface-dark:   var(--ink);
  --border-default: var(--rule);
  --border-subtle:  var(--rule-2);
  --border-dark:    oklch(28% 0.02 200); /* border on dark cards */

  /* Logo ring theming — default: light surface */
  --ring-in-color:  var(--brand-dark);
  --ring-mid-color: var(--brand-strong);
  --ring-out-color: var(--brand);
}

/* Dark surface (ink background) — foreground dots brightest */
.on-dark {
  --ring-in-color:  var(--brand);
  --ring-mid-color: var(--brand-strong);
  --ring-out-color: var(--brand-dark);
}

/* Cyan spotlight (signature bg) — only darker cyans visible */
.on-cyan {
  --ring-in-color:  var(--brand-dark);
  --ring-mid-color: var(--brand-strong);
  --ring-out-color: var(--brand-strong);
}