custom.css

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Geist+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@import "./prose.css";

/* Docusaurus toggles theme with [data-theme="dark"], not .dark */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@layer base {
  :root {
    /* Databricks brand palette */
    --db-navy: #0b2026;
    --db-navy-light: #1b3139;
    --db-lava: #ff3621;
    --db-lava-dark: #eb1600;
    --db-lava-light: #ff5542;
    --db-lava-lightest: #ff9488;
    --db-cyan: #7dd3fc;
    --db-oat-light: #f2f0ed;
    --db-oat-medium: #eeede9;
    --db-bg: #f9f7f4;
    --db-card: #ffffff;
    --db-border: #dce0e2;

    --black: hsl(240 20 2);
    --grey-5: hsl(230 12 5); /* #0B0C0E */
    --grey-8: hsl(230 12 8); /* #121317 */
    --grey-12: hsl(230 10 12);
    --grey-20: hsl(228 10 20); /* #2E3038 */
    --grey-30: hsl(231 8 30); /* #464853 */
    --grey-40: hsl(222 5 40); /* #61646B */
    --grey-50: hsl(229 7 50); /* #777A88 */
    --grey-60: hsl(229 8 60); /* #9194A1 */
    --grey-70: hsl(229 11 70); /* #ABAEBB */
    --grey-80: hsl(228 10 80); /* #C7C9D1 */
    --grey-90: hsl(230 12 90); /* #E3E4E9 */
    --orange: #ff5f46;

    --prose-border: #464853;
    --code-bg: #09090b;
    --code-surface: #242427;
    --code-border: #464853;
    --code-foreground: #f9fafa;
    --code-grey: #e3e4e9;
    --code-comment: #777a88;
    --code-keyword: #e87d85;
    --code-function: #ae93ea;
    --code-variable: #87b6f9;
    --code-class: #ae93ea;
    --code-number: #a7cafa;
    --code-string: #9de6a4;
    --code-operator: #f3af7a;
    --code-highlight-neutral: #242427;
    --code-highlight-true: #2d492f;
    --code-highlight-false: #481f1e;

    /* shadcn semantic tokens mapped to Databricks colors */
    --background: var(--db-bg);
    --foreground: var(--db-navy);
    --card: var(--db-card);
    --card-foreground: var(--db-navy);
    --popover: var(--db-card);
    --popover-foreground: var(--db-navy);
    --primary: var(--db-lava);
    --primary-foreground: #ffffff;
    --secondary: var(--db-oat-medium);
    --secondary-foreground: var(--db-navy);
    --muted: var(--db-oat-medium);
    --muted-foreground: rgb(11 32 38 / 0.65);
    --accent: #e3e2dd;
    --accent-foreground: var(--db-navy);
    --destructive: #d41400;
    --destructive-foreground: #ffffff;
    --border: var(--db-border);
    --input: var(--db-border);
    --ring: var(--db-cyan);
    --chart-1: var(--db-lava);
    --chart-2: #00a972;
    --chart-3: var(--db-cyan);
    --chart-4: #f59e0b;
    --chart-5: #8b5cf6;
    --radius: 0.625rem;

    /* Docusaurus Infima overrides */
    --ifm-color-primary: var(--db-lava);
    --ifm-color-primary-dark: var(--db-lava-dark);
    --ifm-color-primary-darker: #d41400;
    --ifm-color-primary-darkest: #ae1000;
    --ifm-color-primary-light: var(--db-lava-light);
    --ifm-color-primary-lighter: #ff6b5c;
    --ifm-color-primary-lightest: var(--db-lava-lightest);
    --ifm-background-color: var(--db-bg);
    --ifm-font-family-base:
      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ifm-font-family-monospace:
      "Geist Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --ifm-code-font-size: 95%;
    --ifm-pre-padding: 1rem 1.25rem;
    --ifm-navbar-background-color: #000000;
    --ifm-footer-background-color: var(--db-navy);
    --ifm-card-background-color: var(--db-card);
    --ifm-global-border-color: var(--db-border);
    --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 0.1);
    --sidebar: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(240 5.9% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(240 4.8% 95.9%);
    --sidebar-accent-foreground: hsl(240 5.9% 10%);
    --sidebar-border: hsl(220 13% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
  }

  [data-theme="dark"] {
    --db-dark-bg: #111b20;
    --db-dark-surface: #162027;
    --db-dark-card: #182a32;
    --db-dark-border: #2a3f4a;
    /* Bridge Tailwind token classes (bg-db-*, border-db-*) to dark palette */
    --db-bg: var(--db-dark-bg);
    --db-card: var(--db-dark-card);
    --db-border: var(--db-dark-border);

    --black: hsl(240 20 2);
    --grey-5: hsl(230 12 5); /* #0B0C0E */
    --grey-8: hsl(230 12 8); /* #121317 */
    --grey-12: hsl(230 10 12);
    --grey-20: hsl(228 10 20); /* #2E3038 */
    --grey-30: hsl(231 8 30); /* #464853 */
    --grey-40: hsl(222 5 40); /* #61646B */
    --grey-50: hsl(229 7 50); /* #777A88 */
    --grey-60: hsl(229 8 60); /* #9194A1 */
    --grey-70: hsl(229 11 70); /* #ABAEBB */
    --grey-80: hsl(228 10 80); /* #C7C9D1 */
    --grey-90: hsl(230 12 90); /* #E3E4E9 */
    --orange: #ff5f46;

    --prose-border: #464853;

    --background: var(--db-dark-bg);
    --foreground: #f5f7f8;
    --card: var(--db-dark-card);
    --card-foreground: #f5f7f8;
    --popover: var(--db-dark-card);
    --popover-foreground: #f5f7f8;
    --primary: var(--db-lava);
    --primary-foreground: #ffffff;
    --secondary: #243a45;
    --secondary-foreground: #f5f7f8;
    --muted: #243a45;
    --muted-foreground: rgb(245 247 248 / 0.68);
    --accent: #2e4a56;
    --accent-foreground: #ffffff;
    --destructive: #ff6b5c;
    --destructive-foreground: #ffffff;
    --border: var(--db-dark-border);
    --input: var(--db-dark-border);
    --ring: var(--db-cyan);

    --ifm-color-primary: var(--db-lava-light);
    --ifm-color-primary-dark: var(--db-lava);
    --ifm-color-primary-darker: #ff2710;
    --ifm-color-primary-darkest: #d41400;
    --ifm-color-primary-light: #ff7463;
    --ifm-color-primary-lighter: #ff8374;
    --ifm-color-primary-lightest: #ffb1a6;
    --ifm-background-color: var(--db-dark-bg);
    --ifm-background-surface-color: var(--db-dark-surface);
    --ifm-navbar-background-color: #000000;
    --ifm-footer-background-color: #0d1518;
    --ifm-card-background-color: var(--db-dark-card);
    --ifm-global-border-color: var(--db-dark-border);
    --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 0.3);

    --sidebar: hsl(240 5.9% 10%);
    --sidebar-foreground: hsl(240 4.8% 95.9%);
    --sidebar-primary: hsl(224.3 76.3% 48%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(240 3.7% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(240 3.7% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
  }
}

@keyframes faq-accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes faq-accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.faq
  [data-slot="accordion-trigger"][data-state="open"]
  [data-slot="faq-icon-vertical"] {
  transform: rotate(90deg);
}

@theme inline {
  --breakpoint-3xl: 119.9375rem;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-db-navy: var(--db-navy);
  --color-db-navy-light: var(--db-navy-light);
  --color-db-lava: var(--db-lava);
  --color-db-lava-dark: var(--db-lava-dark);
  --color-db-lava-light: var(--db-lava-light);
  --color-db-lava-lightest: var(--db-lava-lightest);
  --color-db-cyan: var(--db-cyan);
  --color-db-oat-light: var(--db-oat-light);
  --color-db-oat-medium: var(--db-oat-medium);
  --color-db-bg: var(--db-bg);
  --color-db-card: var(--db-card);
  --color-db-border: var(--db-border);
  /*  */
  --color-black: var(--black);
  --color-grey-5: var(--grey-5);
  --color-grey-8: var(--grey-8);
  --color-grey-12: var(--grey-12);
  --color-grey-20: var(--grey-20);
  --color-grey-30: var(--grey-30);
  --color-grey-40: var(--grey-40);
  --color-grey-50: var(--grey-50);
  --color-grey-60: var(--grey-60);
  --color-grey-70: var(--grey-70);
  --color-grey-80: var(--grey-80);
  --color-grey-90: var(--grey-90);
  --color-orange: var(--orange);
  --color-prose-border: var(--prose-border);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  html,
  body {
    @apply bg-black text-white;
  }

  body {
    @apply selection:bg-orange selection:text-white;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  /* Tailwind v4 container can conflict with Infima defaults in dev/hot reload. */
  .container {
    margin-inline: auto;
  }

  /* Infima paragraph styles can override Tailwind's mx-auto utility. */
  .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .card,
  .button,
  a {
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease;
  }

  /* Perspectives pages render a self-contained minimal shell with its own
     home link + theme toggle, so the standard Docusaurus chrome must step
     aside. Scope off the `html.plugin-<name>` class that Docusaurus emits
     statically for every plugin route - it's part of the SSR render and
     never touched by react-helmet-async hydration, so the navbar stays
     hidden across the first paint + hydration window with no flicker. */
  html.plugin-perspectives .navbar,
  html.plugin-perspectives .navbar-sidebar,
  html.plugin-perspectives .navbar-sidebar__backdrop {
    display: none !important;
  }

  html.plugin-perspectives .main-wrapper {
    margin-top: 0;
  }

  /* Infima styles every anchor with --ifm-link-color (lava) at the same
     specificity as Tailwind's text-* utilities, so the perspectives footer
     legal links need an explicitly scoped rule to read as muted body text. */
  html.plugin-perspectives .perspectives-legal-link {
    color: var(--muted-foreground);
  }

  html.plugin-perspectives .perspectives-legal-link:hover {
    color: var(--foreground);
  }

  /* Search results dropdown */
  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
    background: var(--ifm-background-color) !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
    background-color: var(--ifm-background-color) !important;
  }

  .algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
    background: var(--ifm-background-surface-color) !important;
    box-shadow: inset -2px 0 0 var(--db-lava) !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--title {
    color: var(--ifm-font-color-base) !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--text {
    color: var(--muted-foreground) !important;
  }

  [data-theme="dark"]
    .algolia-autocomplete
    .algolia-docsearch-suggestion--text {
    color: rgb(245 247 248 / 0.7) !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
    background-color: var(--db-navy) !important;
    color: #fff !important;
  }

  [data-theme="dark"]
    .algolia-autocomplete
    .algolia-docsearch-suggestion--category-header {
    background-color: var(--db-navy-light) !important;
  }

  .algolia-autocomplete .algolia-docsearch-footer {
    background-color: var(--ifm-background-color) !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
    background: rgb(255 54 33 / 0.15) !important;
    color: var(--db-lava) !important;
  }

  /* No-results state */
  .algolia-autocomplete .algolia-docsearch-suggestion--no-results {
    background-color: var(--ifm-background-color) !important;
    color: var(--ifm-font-color-base) !important;
    padding: 1.25rem 1rem !important;
    font-size: 0.9rem !important;
    text-align: left !important;
  }

  .algolia-autocomplete
    .algolia-docsearch-suggestion--no-results
    .algolia-docsearch-suggestion--text {
    color: var(--muted-foreground) !important;
    margin-top: 0.25rem !important;
  }

  .algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
    display: none !important;
  }

  @media (max-width: 996px) {
    :root {
      --ifm-navbar-sidebar-width: 100vw;
    }
  }
}

@layer utilities {
  /* Templates filters sidebar: custom dark variant uses :where() (zero specificity), so dark:bg-* can tie bg-white/60 and lose cascade order in prod. */
  [data-theme="dark"] .templates-filter-surface {
    background-color: var(--db-dark-card);
    border-color: rgb(255 255 255 / 0.12);
  }

  /* Tailwind slash-opacity classes need explicit dark overrides */
  [data-theme="dark"] .text-db-navy {
    color: rgb(245 247 248) !important;
  }

  [data-theme="dark"] .text-db-navy\/70 {
    color: rgb(245 247 248 / 0.72) !important;
  }

  [data-theme="dark"] .text-db-navy\/65 {
    color: rgb(245 247 248 / 0.66) !important;
  }

  [data-theme="dark"] .text-db-navy\/60 {
    color: rgb(245 247 248 / 0.6) !important;
  }
}

@utility remove-autocomplete-styles {
  &:-webkit-autofill,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:hover {
    -webkit-transition:
      background-color 5000s,
      color 5000s;
    transition:
      background-color 5000s,
      color 5000s;
  }
}

/* Override Infima's `table { display: block }` so columns fill the container.
 * Unlayered to beat Infima's @layer docusaurus.infima rule. */
.db-docs-article .theme-doc-markdown table {
  display: table;
}

/* Let long paths/URLs in cells break when they'd overflow the column. */
.db-docs-article .theme-doc-markdown td code,
.db-docs-article .theme-doc-markdown th code {
  overflow-wrap: break-word;
}

/* Hackathon announcement bar
 * height: auto !important overrides Docusaurus's @media (min-width: 997px)
 * rule that hard-codes --docusaurus-announcement-bar-height: 30px, which
 * would otherwise crush our padding-block values on desktop. */
:root {
  --docusaurus-announcement-bar-height: auto;
  --devhub-mobile-menu-top: 3.5rem;
}

.theme-announcement-bar {
  font-family: "Geist Mono", monospace;
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  /* Override Docusaurus fixed height so padding controls height */
  height: auto;
  min-height: 44px;
  /* Stretch inner div to full height so bg fills edge-to-edge */
  align-items: stretch;
  border-bottom: none;
  /* Explicit padding on the orange wrapper */
  padding-top: 14px;
  padding-bottom: 14px;
  padding-inline: 0;
  z-index: 10;
}

/* Inner content wrapper: stretch to fill, use flex to center text vertically */
/* Override Docusaurus AnnouncementBar/Content CSS Module:
 * .content { font-size: 85%; padding: 5px 0 } loads after ours and would
 * shrink text to ~11.9px and add unwanted padding.
 * display: flex + align-items: center ensures text is vertically centred
 * while the inner div stretches to fill the full orange wrapper. */
.theme-announcement-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: inherit;
  padding: 0;
}

.theme-announcement-bar .banner-marquee-track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-announcement-bar .banner-marquee-item {
  display: inline-flex;
  align-items: center;
}

.theme-announcement-bar .banner-marquee-copy {
  display: none;
}

/* "See resources" link */
.theme-announcement-bar a {
  color: inherit;
  text-decoration: none !important;
  font-weight: 500;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Underline the link text so it's clearly recognizable as a link */
.theme-announcement-bar .banner-link-text {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Arrow icon */
.theme-announcement-bar .banner-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 768px–1024px: smaller text, smaller arrow, less padding */
@media (max-width: 768px) {
  .theme-announcement-bar {
    font-size: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 38px;
  }

  .theme-announcement-bar .banner-arrow {
    width: 14px;
    height: 14px;
  }
}

/* Marquee keyframes for small viewports.
 * The track contains two identical items; moving by 50% loops seamlessly. */
@keyframes banner-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 768px and below: marquee — full line in one row, scrolling */
@media (max-width: 768px) {
  /* Keep display:flex from base so align-items:stretch fills the orange bg
   * edge-to-edge; overflow:hidden clips the scrolling content. */
  .theme-announcement-bar {
    overflow: hidden;
    padding-inline: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Content wrapper clips a wider marquee track without changing page width. */
  .theme-announcement-bar > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  /* Track is wider than the viewport because it contains the visible item and
   * an aria-hidden duplicate. The 50% transform moves exactly one item width. */
  .theme-announcement-bar .banner-marquee-track {
    display: flex;
    align-items: center;
    min-width: max-content;
    white-space: nowrap;
    animation: banner-marquee 12s linear infinite;
    will-change: transform;
  }

  .theme-announcement-bar .banner-marquee-item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 2rem;
    white-space: nowrap;
  }

  .theme-announcement-bar .banner-marquee-copy {
    display: inline-flex;
  }

  /* Restore "See resources" text inline */
  .theme-announcement-bar .banner-link-text {
    display: inline;
    white-space: nowrap;
  }

  /* Link stays on the same axis as the lead text */
  .theme-announcement-bar a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    white-space: nowrap;
  }

  /* Arrow inherits flex alignment — no extra vertical offset needed */
  .theme-announcement-bar .banner-arrow {
    display: inline-block;
    flex-shrink: 0;
  }
}