/* MAIA Motion System — token layer (Etapa 01).
   Loads AFTER the design-system tokens and re-tunes the accent to the HUD cyan defined by the motion
   spec. DS components rendered inside the showcase follow the same accent through the bridge block,
   so buttons, chips and HUD line work never show two different blues.
   Flip the whole showcase to the logo blue with data-accent="brand-blue" on the showcase root. */
:root, [data-motion-system] {
  /* Accent */
  --maia-cyan: #00d4ff;
  --maia-cyan-bright: #7ce7ff;
  --maia-cyan-rgb: 0, 212, 255;
  --maia-purple: #a855f7; /* Apex / Universe only */
  --maia-green: #00dc82;
  --maia-amber: #ffc24b;
  --maia-red: #ff5470;

  /* Base — flat near-blacks */
  --maia-black: #05070c;
  --maia-black-2: #06090f;
  --maia-bg: #070a10;
  --maia-bg-raised: #0a0e16;
  --maia-surface-1: #0d1320;
  --maia-surface-2: #0e1726;
  --maia-surface-glass: rgba(13, 19, 32, .55);
  --maia-header-glass: rgba(7, 10, 16, .92);

  /* Text */
  --maia-text-1: #e8eef6;
  --maia-text-2: #c2cfe2;
  --maia-text-3: #93a4bd;
  --maia-text-4: #6b7d98; /* Etapa 15: lifted from #5b6b84 to ≥ 4.5:1 on the page background — metadata stays readable */

  /* Line work — 1px hairlines, thinner as they nest */
  --maia-line-strong: rgba(var(--maia-cyan-rgb), .40);
  --maia-line: rgba(var(--maia-cyan-rgb), .18);
  --maia-line-soft: rgba(var(--maia-cyan-rgb), .13);
  --maia-line-faint: rgba(var(--maia-cyan-rgb), .08);
  --maia-cyan-wash: rgba(var(--maia-cyan-rgb), .05);
  --maia-cyan-fill: rgba(var(--maia-cyan-rgb), .10);

  /* Geometry */
  --radius-chip: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-frame: 14px;

  /* Glow — active energy, never a card shadow */
  --glow-accent: 0 0 24px rgba(var(--maia-cyan-rgb), .18);
  --glow-accent-strong: 0 0 40px rgba(var(--maia-cyan-rgb), .28);
  --glow-purple: 0 0 28px rgba(168, 85, 247, .22);

  /* HUD grid */
  --grid-cell: 40px;
  --grid-line: rgba(var(--maia-cyan-rgb), .05);
  --bg-grid: repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--grid-cell)),
             repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-cell));

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* entrances / reveals */
  --ease-hud: cubic-bezier(.4, 0, .2, 1);    /* internal state / HUD changes */
  --dur-fast: 120ms;      /* hover */
  --dur-base: 200ms;      /* state */
  --dur-slow: 400ms;      /* reveal */
  --dur-ambient: 6000ms;  /* ambient loops */

  /* Bridge → design-system components pick up the showcase accent */
  --maia-blue: var(--maia-cyan);
  --maia-blue-bright: var(--maia-cyan-bright);
  --accent: var(--maia-cyan);
  --accent-hover: var(--maia-cyan-bright);
  --border-card: var(--maia-line);
  --border-section: var(--maia-line-soft);
  --border-faint: var(--maia-line-faint);
  --border-placeholder: var(--maia-line-strong);
  --surface-page: var(--maia-bg);
  --surface-page-deep: var(--maia-black);
  --surface-card: var(--maia-surface-1);
  --surface-card-alt: var(--maia-surface-2);
  --surface-header: var(--maia-header-glass);
  --on-accent: var(--maia-black);
}

/* Accent variant — the logo blue from the design system (tweak `accent` on the showcase root) */
[data-accent="brand-blue"] {
  --maia-cyan: #0095ea;
  --maia-cyan-bright: #6fd1ff;
  --maia-cyan-rgb: 0, 149, 234;
}