/* CueRithm brand on Material for MkDocs. Tokens follow the CueRithm 1.0 brand kit
   (06-implementation/brand-tokens.css): Cobalt #3658F5, Signal coral #FF785E,
   Night #10121B, Paper #F7F7F2. Dark accent text #8C9FFF, light coral text #B53724. */
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk.woff") format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url("../assets/fonts/Inter.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/IBMPlexMono-Regular.woff") format("woff");font-weight:400;font-display:swap}

:root {
  --cr-cobalt: #3658F5;
  --cr-coral: #FF785E;
  --cr-night: #10121B;
  --cr-paper: #F7F7F2;
  --cr-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --cr-font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cr-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --md-text-font: var(--cr-font-ui);
  --md-code-font: var(--cr-font-data);
  --cr-rule: linear-gradient(90deg, #3658F5 0%, #3658F5 62%, #FF785E 100%);
}

/* Light scheme: Paper surfaces, Cobalt actions, coral as the single warm accent */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cr-night);
  --md-primary-fg-color--light: #222635;
  --md-primary-fg-color--dark: #0a0c13;
  --md-primary-bg-color: var(--cr-paper);
  --md-primary-bg-color--light: rgba(247, 247, 242, 0.72);
  --md-accent-fg-color: #2946D8;
  --md-accent-fg-color--transparent: rgba(54, 88, 245, 0.1);
  --md-accent-bg-color: #fff;
  --md-default-bg-color: #FFFFFF;
  --md-default-fg-color: #171A24;
  --md-default-fg-color--light: #606779;
  --md-typeset-color: #171A24;
  --md-typeset-a-color: #2946D8;
  --md-code-bg-color: #F0F1F7;
  --md-code-fg-color: #171A24;
  --md-typeset-mark-color: rgba(255, 120, 94, 0.28);
  --cr-surface: #F7F7F2;
  --cr-raised: #F0F1F7;
  --cr-border: #D8DBE4;
  --cr-warm-text: #B53724;
}

/* Dark scheme: Night surfaces, lifted accent text for contrast */
[data-md-color-scheme="slate"] {
  --md-hue: 230;
  --md-primary-fg-color: #0b0d14;
  --md-primary-fg-color--light: #191C28;
  --md-primary-fg-color--dark: #07080d;
  --md-primary-bg-color: #F5F6FA;
  --md-accent-fg-color: #8C9FFF;
  --md-accent-fg-color--transparent: rgba(140, 159, 255, 0.12);
  --md-default-bg-color: var(--cr-night);
  --md-default-bg-color--light: #191C28;
  --md-default-bg-color--lighter: #222635;
  --md-default-fg-color: #F5F6FA;
  --md-default-fg-color--light: #B0B7CB;
  --md-typeset-color: rgba(245, 246, 250, 0.9);
  --md-typeset-a-color: #8C9FFF;
  --md-code-bg-color: #191C28;
  --md-code-fg-color: #F5F6FA;
  --md-typeset-mark-color: rgba(255, 120, 94, 0.32);
  --md-footer-bg-color: #0b0d14;
  --md-footer-bg-color--dark: #07080d;
  --cr-surface: #191C28;
  --cr-raised: #222635;
  --cr-border: #303648;
  --cr-warm-text: #FF9D91;
}

/* Header: Night in both schemes, two-tone cobalt/coral rule */
.md-header { box-shadow: none; border-bottom: 3px solid transparent; border-image: var(--cr-rule) 1; }
.md-tabs { background-color: var(--md-primary-fg-color); }
.md-tabs__link { opacity: 0.8; }
.md-tabs__link--active, .md-tabs__link:hover { opacity: 1; color: #B4C1FF; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.7rem; width: auto; }
.md-header__title { font-family: var(--cr-font-display); font-weight: 600; }

/* Typography: Space Grotesk for headings, Inter for reading, Plex Mono for data */
.md-typeset { font-size: 0.8rem; line-height: 1.72; font-family: var(--cr-font-ui); }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-family: var(--cr-font-display); }
.md-typeset h1 { font-weight: 600; letter-spacing: -0.02em; color: var(--md-default-fg-color); }
.md-typeset h2 { font-weight: 600; letter-spacing: -0.01em; margin-top: 2.1em; }
.md-typeset h3 { font-weight: 600; }
.md-typeset .lead { font-size: 1.06em; color: var(--md-default-fg-color--light); margin-top: -0.4em; }
.md-typeset code, .md-typeset kbd, .md-typeset pre { font-family: var(--cr-font-data); }
.md-typeset :not(pre) > code { border-radius: 4px; padding: 0.05em 0.35em; }
.md-typeset kbd { border-radius: 4px; font-size: 0.78em; }
.md-nav { font-size: 0.7rem; }
.md-nav__title { font-family: var(--cr-font-display); }

/* Data labels: keys, BPM, energy and cues keep visible labels, never colour alone */
.cr-key, .cr-bpm, .cr-energy { font-family: var(--cr-font-data); font-size: 0.85em; border: 1px solid var(--cr-border); border-radius: 5px; padding: 0 0.4em; background: var(--cr-raised); white-space: nowrap; }
.cr-cue { font-family: var(--cr-font-data); font-size: 0.82em; border-radius: 5px; padding: 0.05em 0.45em; border: 1px solid currentColor; white-space: nowrap; }
.cr-cue--start { color: #8a6d00; } .cr-cue--drop { color: #b01c18; } .cr-cue--breakdown { color: #1f4fc9; } .cr-cue--end { color: #7b32c9; }
[data-md-color-scheme="slate"] .cr-cue--start { color: #f2d34a; } [data-md-color-scheme="slate"] .cr-cue--drop { color: #ff8d86; }
[data-md-color-scheme="slate"] .cr-cue--breakdown { color: #8fb0ff; } [data-md-color-scheme="slate"] .cr-cue--end { color: #c9a0ff; }

/* Tables */
.md-typeset table:not([class]) { border-radius: 10px; font-size: 0.74rem; border: 1px solid var(--cr-border); }
.md-typeset table:not([class]) th { background: var(--cr-raised); font-weight: 600; font-family: var(--cr-font-display); }
.md-typeset table:not([class]) td { vertical-align: top; }
.md-typeset table:not([class]) td code { white-space: pre-wrap; word-break: break-word; }

/* Screenshots: framed, rounded, responsive */
.md-typeset img.screen, .md-typeset figure img { border-radius: 10px; border: 1px solid var(--cr-border); box-shadow: 0 10px 32px rgba(16, 18, 27, 0.2); }
.md-typeset figure { margin: 1.5em auto; }
.md-typeset figcaption { font-size: 0.72rem; color: var(--md-default-fg-color--light); max-width: 46rem; margin: 0.6em auto 0; }
.md-typeset img.crop { box-shadow: none; }
.md-typeset img.crop-tall { max-height: 30rem; width: auto; max-width: 100%; }
.md-typeset .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media screen and (max-width: 60em) { .md-typeset .two-up { grid-template-columns: 1fr; } }

/* Home hero */
.cr-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin: 0.4rem 0 2rem; }
.cr-hero__logo { max-width: 19rem; margin: 0 0 0.8rem; }
.md-typeset .cr-hero h1 { font-size: 2.1rem; margin: 0 0 0.4rem; line-height: 1.15; }
.cr-hero p { margin: 0 0 1rem; max-width: 40rem; }
.md-typeset .md-button { border-radius: 8px; font-family: var(--cr-font-ui); font-weight: 600; }
.md-typeset .md-button--primary { background: var(--cr-cobalt); border-color: var(--cr-cobalt); color: #fff; }
.md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { background: #2946D8; border-color: #2946D8; color: #fff; }
.md-typeset .md-button:not(.md-button--primary) { color: var(--md-typeset-a-color); border-color: var(--md-typeset-a-color); }
.md-typeset .md-button:not(.md-button--primary):is(:hover, :focus) { background: var(--cr-coral); border-color: var(--cr-coral); color: #10121B; }

/* Cards */
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { border-radius: 12px; border-color: var(--cr-border); background: var(--cr-surface); transition: border-color 0.2s, transform 0.2s; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--cr-cobalt); transform: translateY(-2px); box-shadow: none; }
.md-typeset .grid.cards .lg { color: var(--cr-coral); }

/* Admonitions in brand colours */
.md-typeset .admonition, .md-typeset details { border-radius: 10px; border-color: var(--cr-cobalt); }
.md-typeset .admonition.warning, .md-typeset details.warning { border-color: var(--cr-coral); }
.md-typeset .admonition.danger, .md-typeset details.danger { border-color: #AE3024; }

/* Provenance / notice box */
.md-typeset .cr-notice { border-left: 4px solid var(--cr-coral); background: var(--cr-surface); padding: 0.7rem 1rem; border-radius: 0 10px 10px 0; margin: 1.2em 0; }

:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }