/* Raft Developers theme tokens and theme switcher */

:root {
  --font-body: Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Brand palette — Figma Color Styles, "Raft *" */
  --raft-magenta: #C52EA3;
  --raft-deep-blue: #2638D8;
  --raft-light-blue: #21ADFC;
  --raft-black: #131313;
  --raft-mid-gray: #707070;
  --raft-green: #49D768;

  /* Alert palette (Priority/Alerts from Figma) */
  --alert-high: #F83838;
  --alert-high-light: #F96060;
  --alert-high-tint: #FED7D7;
  --alert-moderate: #D9EC16;
  --alert-low: #49D768;

  /* Role tokens — LIGHT mode */
  --primary-main: var(--raft-magenta);
  --primary-light: color-mix(in srgb, var(--raft-magenta), white 30%);
  --primary-dark: color-mix(in srgb, var(--raft-magenta), black 30%);
  --accent-main: var(--raft-magenta);
  --accent-muted: color-mix(in srgb, var(--raft-magenta), white 50%);
  --success-main: var(--raft-green);
  --warning-main: var(--alert-moderate);
  --error-main: var(--alert-high);
  --info-main: var(--raft-light-blue);

  --text-primary: var(--raft-black);
  --text-secondary: color-mix(in srgb, var(--raft-black), white 40%);
  --text-muted: var(--raft-mid-gray);
  --text-disabled: color-mix(in srgb, var(--raft-mid-gray), white 40%);
  --text-inverse: #f4f4ef;

  --background-default: #f4f4ef;
  --background-paper: #ffffff;
  --background-elevation-0: #ededE7;
  --background-elevation-1: #F1F1F1;
  --background-elevation-2: #f2f2ec;
  --background-elevation-3: #e3e4dc;
  --background-elevation-4: #d2d5cd;
  --background-shell: var(--raft-black);
  --background-shell-strong: #000000;

  --divider: color-mix(in srgb, var(--raft-mid-gray), white 65%);
  --divider-strong: color-mix(in srgb, var(--raft-mid-gray), white 35%);
  --action-hover: color-mix(in srgb, var(--raft-magenta) 8%, transparent);
  --action-selected: color-mix(in srgb, var(--raft-magenta) 14%, transparent);

  --surface-border: #A9A9A9;
  --surface-border-strong: color-mix(in srgb, #A9A9A9, black 25%);
  --surface-shadow: 0 20px 50px color-mix(in srgb, var(--raft-black) 8%, transparent);
  --surface-shadow-strong: 0 22px 55px color-mix(in srgb, var(--raft-black) 18%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--raft-magenta) 30%, transparent);

  --navbar-bg: #ffffff;
  --navbar-text: var(--raft-black);
  --navbar-muted: color-mix(in srgb, var(--raft-black) 60%, transparent);

  --toolbar-bg: #fcf5fa;

  /* Shell tokens (navbar / sidebar / footer / search): always-dark surfaces.
     Accent shifts to magenta; white-overlay values unchanged. */
  --shell-accent-bg-soft: color-mix(in srgb, var(--raft-magenta) 13%, transparent);
  --shell-accent-bg: color-mix(in srgb, var(--raft-magenta) 14%, transparent);
  --shell-accent-border-soft: color-mix(in srgb, var(--raft-magenta) 34%, transparent);
  --shell-accent-border: color-mix(in srgb, var(--raft-magenta) 42%, transparent);

  --shell-text: rgba(238, 243, 239, 0.72);
  --shell-text-emphasis: rgba(238, 243, 239, 0.9);
  --shell-text-muted: rgba(238, 243, 239, 0.66);
  --shell-text-dim: rgba(238, 243, 239, 0.56);
  --shell-text-faint: rgba(238, 243, 239, 0.48);
  --shell-text-meta: rgba(238, 243, 239, 0.46);
  --shell-icon: rgba(238, 243, 239, 0.52);

  --shell-divider: rgba(238, 243, 239, 0.08);
  --shell-divider-soft: rgba(238, 243, 239, 0.1);

  --shell-hover: rgba(255, 255, 255, 0.06);
  --shell-tab-hover: rgba(255, 255, 255, 0.07);
  --shell-burger-hover: rgba(255, 255, 255, 0.08);
  --shell-hover-strong: rgba(255, 255, 255, 0.12);

  --shell-border-soft: rgba(255, 255, 255, 0.08);
  --shell-border: rgba(255, 255, 255, 0.1);
  --shell-border-medium: rgba(255, 255, 255, 0.12);
  --shell-tab-hover-border: rgba(255, 255, 255, 0.13);
  --shell-chip-border: rgba(255, 255, 255, 0.14);
  --shell-control-bg: rgba(255, 255, 255, 0.075);
  --shell-control-border: rgba(255, 255, 255, 0.16);
  --shell-control-border-strong: rgba(255, 255, 255, 0.28);
  --shell-text-strong: #fff;
}

[data-theme="dark"] {
  /* Role tokens — DARK mode (brand --raft-* constants inherited from :root) */
  --primary-main: var(--raft-magenta);
  --primary-light: color-mix(in srgb, var(--raft-magenta), white 30%);
  --primary-dark: color-mix(in srgb, var(--raft-magenta), black 30%);
  --accent-main: var(--raft-magenta);
  --accent-muted: color-mix(in srgb, var(--raft-magenta), black 40%);
  --success-main: var(--raft-green);
  --warning-main: var(--alert-moderate);
  --error-main: var(--alert-high);
  --info-main: var(--raft-light-blue);

  --text-primary: #f4f4ef;
  --text-secondary: color-mix(in srgb, #f4f4ef, var(--raft-black) 30%);
  --text-muted: color-mix(in srgb, #f4f4ef, var(--raft-black) 50%);
  --text-disabled: color-mix(in srgb, #f4f4ef, var(--raft-black) 65%);
  --text-inverse: var(--raft-black);

  --background-default: var(--raft-black);
  --background-paper: color-mix(in srgb, var(--raft-black), white 5%);
  --background-elevation-0: #0e0e0e;
  --background-elevation-1: #181818;
  --background-elevation-2: color-mix(in srgb, var(--raft-black), white 10%);
  --background-elevation-3: color-mix(in srgb, var(--raft-black), white 15%);
  --background-elevation-4: color-mix(in srgb, var(--raft-black), white 22%);
  --background-shell: #0a0a0a;
  --background-shell-strong: #060606;

  --divider: color-mix(in srgb, var(--raft-mid-gray), var(--raft-black) 60%);
  --divider-strong: color-mix(in srgb, var(--raft-mid-gray), var(--raft-black) 40%);
  --action-hover: color-mix(in srgb, var(--raft-magenta) 11%, transparent);
  --action-selected: color-mix(in srgb, var(--raft-magenta) 18%, transparent);

  --surface-border: #707070;
  --surface-border-strong: color-mix(in srgb, #707070, white 25%);
  --surface-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --surface-shadow-strong: 0 28px 80px rgba(0, 0, 0, 0.42);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--raft-magenta) 30%, transparent);

  --navbar-bg: #000000;
  --navbar-text: #ffffff;
  --navbar-muted: color-mix(in srgb, #ffffff 60%, transparent);

  --toolbar-bg: #140510;
}

html {
  background: var(--background-default);
}

body {
  background:
    linear-gradient(90deg, rgba(47, 111, 136, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(179, 111, 49, 0.035) 1px, transparent 1px),
    var(--background-default);
  background-size: 42px 42px, 42px 42px, auto;
  color: var(--text-primary);
  font-family: var(--font-body);
}

[data-theme="dark"] body {
  background:
    linear-gradient(90deg, rgba(116, 174, 189, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(208, 154, 91, 0.035) 1px, transparent 1px),
    var(--background-default);
  background-size: 42px 42px, 42px 42px, auto;
}

.theme-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--navbar-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--navbar-text) 18%, transparent);
  border-radius: 0;
  color: var(--navbar-text);
  cursor: pointer;
  display: inline-flex;
  height: 2.35rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 2.35rem;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--navbar-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--navbar-text) 32%, transparent);
}

.theme-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.theme-toggle svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  width: 18px;
}

.theme-toggle .moon-icon {
  fill: currentColor;
  stroke: none;
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

button,
a,
.download-card,
.search-button,
.theme-toggle,
.nav-item a,
.toc-menu a {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}