:root {
  /* Cinevva brand tokens (used to derive VitePress theme vars) */
  --cv-c-violet: #8b5cf6;
  --cv-c-violet-2: #7c3aed;
  --cv-c-cyan: #22d3ee;
  --cv-c-cyan-2: #06b6d4;

  /* Links (explicit, higher-contrast than defaults) */
  --cv-c-link: #0284c7;
  --cv-c-link-hover: #06b6d4;
  --cv-c-link-visited: #6d28d9;

  /* VitePress brand */
  --vp-c-brand-1: var(--cv-c-violet);
  --vp-c-brand-2: var(--cv-c-violet-2);
  --vp-c-brand-3: #a78bfa;

  /* Tool components use these semantic aliases for their interactive states.
     VitePress only supplies --vp-c-brand and --vp-c-brand-soft by default;
     leaving the aliases undefined makes a hovered primary button transparent
     while its white label remains, particularly noticeable in light mode. */
  --vp-c-brand-dark: var(--vp-c-brand-2);
  --vp-c-brand-light: var(--vp-c-brand-3);
  --vp-c-brand-dimm: var(--vp-c-brand-soft);
  --vp-c-brand-rgb: 139, 92, 246;

  /* Credits = gold. Light theme needs a deeper gold to stay readable on
     light surfaces; dark theme uses a brighter gold (see html.dark). */
  --cv-c-credit: #9a6a00;
  --cv-c-credit-bg: rgba(212, 160, 23, 0.14);
  --cv-c-credit-border: rgba(212, 160, 23, 0.45);
  --cv-c-credit-glow: rgba(212, 160, 23, 0.18);

  /* Typography */
  --vp-font-family-base:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  --vp-font-family-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace;

  /* Light theme surfaces */
  --vp-c-bg: #fbfbfe;
  --vp-c-bg-alt: #f5f6ff;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f0f1ff;

  --vp-c-text-1: #0f172a;
  --vp-c-text-2: #334155;
  --vp-c-text-3: #64748b;

  --vp-c-border: rgba(15, 23, 42, 0.14);
  --vp-c-divider: rgba(15, 23, 42, 0.1);

  /* Component color schema. Use these roles in interactive UI; keep VitePress
     palette tokens above for page surfaces and decorative separators.
     Aliases resolve here in each theme; components must not redefine them. */
  --cv-c-control-bg: var(--vp-c-bg-soft);
  --cv-c-control-hover-bg: var(--vp-c-bg-elv);
  --cv-c-control-fg: var(--vp-c-text-1);
  --cv-c-control-muted: var(--vp-c-text-2);
  --cv-c-panel-bg: var(--vp-c-bg-elv);
  --cv-c-panel-border: var(--vp-c-border);
  --cv-c-control-active-bg: var(--vp-c-brand-2);
  --cv-c-control-active-fg: #ffffff;
  --cv-c-control-border: #7c8194;
  --cv-c-control-accent: #6d28d9;
  --cv-c-modal-bg: var(--vp-c-bg-elv);
  --cv-c-modal-backdrop: rgba(0, 0, 0, 0.48);

  --vp-code-block-bg: rgba(2, 6, 23, 0.04);
  --vp-code-bg: rgba(2, 6, 23, 0.07);

  --cv-bg-gradient:
    radial-gradient(900px 600px at 18% 10%, rgba(139, 92, 246, 0.12), transparent 65%),
    radial-gradient(900px 600px at 85% 0%, rgba(34, 211, 238, 0.1), transparent 60%),
    radial-gradient(900px 700px at 85% 90%, rgba(124, 58, 237, 0.06), transparent 60%);
}
html.dark {
  color-scheme: dark;

  --vp-c-bg: #070714;
  --vp-c-bg-alt: #121221;
  --vp-c-bg-elv: #202034;
  --vp-c-bg-soft: #28283e;

  --vp-c-text-1: rgba(255, 255, 255, 0.92);
  --vp-c-text-2: rgba(255, 255, 255, 0.72);
  --vp-c-text-3: rgba(255, 255, 255, 0.56);

  --vp-c-border: rgba(255, 255, 255, 0.24);
  --vp-c-divider: rgba(255, 255, 255, 0.16);

  --cv-c-control-border: #85859d;
  --cv-c-control-accent: #c4b5fd;
  --cv-c-modal-backdrop: rgba(0, 0, 0, 0.48);

  --vp-code-block-bg: rgba(0, 0, 0, 0.3);
  --vp-code-bg: rgba(255, 255, 255, 0.08);

  --cv-c-link: #7dd3fc;
  --cv-c-link-hover: #22d3ee;
  --cv-c-link-visited: #c4b5fd;

  /* Credits = gold (brighter on dark surfaces) */
  --cv-c-credit: #ffd166;
  --cv-c-credit-bg: rgba(255, 209, 102, 0.12);
  --cv-c-credit-border: rgba(255, 209, 102, 0.35);
  --cv-c-credit-glow: rgba(255, 209, 102, 0.18);

  --cv-bg-gradient:
    radial-gradient(900px 600px at 18% 10%, rgba(139, 92, 246, 0.22), transparent 65%),
    radial-gradient(900px 600px at 85% 0%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(900px 700px at 85% 90%, rgba(124, 58, 237, 0.12), transparent 60%);
}