/* ================================================================
   MIRAI Design Tokens
   Source of truth for all brand colors, surfaces, gradients, and
   text styles used across the BRIO frontend.
   ================================================================ */

:root {
  /* ── Brand colors ── */
  --mirai-magenta:     #D91EBA;
  --mirai-magenta-dim: rgba(217, 30, 186, .45);
  --mirai-cyan:        #13DCF2;
  --mirai-dark:        #141B20;
  --mirai-bg:          rgb(8, 11, 14);

  /* ── Cyan opacity scales ── */
  --mirai-cyan-06: rgba(19, 220, 242, .06);
  --mirai-cyan-15: rgba(19, 220, 242, .15);
  --mirai-cyan-30: rgba(19, 220, 242, .30);

  /* ── Surface overlays ── */
  --surface-overlay-25: rgba(0, 0, 0, .25);
  --surface-overlay-30: rgba(0, 0, 0, .3);
  --surface-overlay-35: rgba(0, 0, 0, .35);
  --surface-overlay-50: rgba(0, 0, 0, .5);
  --surface-overlay-60: rgba(0, 0, 0, .6);
  --surface-overlay-75: rgba(0, 0, 0, .75);
  --surface-overlay-80: rgba(0, 0, 0, .8);
  --surface-overlay-85: rgba(0, 0, 0, .85);

  /* ── Gradients ── */
  --grad-bg-a:   rgba(8, 11, 14, 1);
  --grad-bg-b:   rgba(20, 27, 32, 0.85);
  --grad-card-a: rgba(0, 0, 0, .3);
  --grad-card-b: rgba(0, 0, 0, .2);

  /* ── Text ── */
  --text-primary:      rgba(255, 255, 255, .70);
  --text-disabled:     rgba(255, 255, 255, .70);
  --text-hover-dark:   #141B20;
  --card-header-color: var(--mirai-cyan);

  /* ── Scrollbar (Firefox) ── */
  scrollbar-color: var(--mirai-magenta) transparent;
  scrollbar-width: thin;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
  --mirai-cyan:        #0899aa;
  --mirai-cyan-06:     rgba(5, 151, 167, .10);
  --mirai-cyan-15:     rgba(5, 151, 167, .25);
  --mirai-cyan-30:     rgba(5, 151, 167, .35);
  --mirai-magenta-dim: rgba(217, 30, 186, .35);
  --text-disabled:     rgba(0, 0, 0, .35);
  --text-primary:      rgba(0, 0, 0, .72);
  --text-hover-dark:   #141B20;
  --surface-overlay-25: rgba(0, 0, 0, .04);
  --surface-overlay-30: rgba(0, 0, 0, .06);
  --surface-overlay-35: rgba(0, 0, 0, .05);
  --surface-overlay-50: rgba(0, 0, 0, .12);
  --surface-overlay-60: rgba(0, 0, 0, .09);
  --surface-overlay-75: rgba(255, 255, 255, .95);
  --surface-overlay-80: rgba(255, 255, 255, .95);
  --surface-overlay-85: rgba(242, 243, 245, .97);
  --grad-bg-a:         rgba(230, 233, 238, 1);
  --grad-bg-b:         rgba(242, 243, 245, 0.90);
  --grad-card-a:       rgba(255, 255, 255, .75);
  --grad-card-b:       rgba(255, 255, 255, .55);
  --card-header-color: var(--mirai-cyan);
}