@import "tailwindcss";

/* =========================================================================
   Design tokens — single brand var drives the whole app.
   Change `--brand-h` / `--brand-c` to retheme.
   Section-level dark/light: wrap with `.theme-dark` or `.theme-light`.
   ========================================================================= */

@theme {
  /* ============================================================
     Brand — preset chosen at template-generation time via
     `--brand-color` CLI flag. Each preset is tuned so contrast
     on dark + light themes works. Users can override at runtime
     via the in-app picker (/settings/appearance), which writes
     CSS variables on `<html>`.
     ============================================================ */
{%- if cookiecutter.brand_color == "blue" %}
  /* Preset: BLUE (Stripe / Vercel — classic SaaS) */
  --brand-h: 250;
  --brand-c: 0.20;
  --brand-l: 65%;
  --color-brand-foreground: oklch(98% 0 0);
{%- elif cookiecutter.brand_color == "green" %}
  /* Preset: GREEN (calm, fresh, healthtech) */
  --brand-h: 155;
  --brand-c: 0.18;
  --brand-l: 65%;
  --color-brand-foreground: oklch(98% 0 0);
{%- elif cookiecutter.brand_color == "red" %}
  /* Preset: RED (warm, energetic) */
  --brand-h: 25;
  --brand-c: 0.20;
  --brand-l: 60%;
  --color-brand-foreground: oklch(98% 0 0);
{%- elif cookiecutter.brand_color == "violet" %}
  /* Preset: VIOLET (Linear / Anthropic — modern AI) */
  --brand-h: 295;
  --brand-c: 0.22;
  --brand-l: 65%;
  --color-brand-foreground: oklch(98% 0 0);
{%- elif cookiecutter.brand_color == "orange" %}
  /* Preset: ORANGE (warm, friendly, B2C) */
  --brand-h: 55;
  --brand-c: 0.18;
  --brand-l: 72%;
  --color-brand-foreground: oklch(15% 0 0);
{%- else %}
  /* Preset: BLUE (default fallback) */
  --brand-h: 250;
  --brand-c: 0.20;
  --brand-l: 65%;
  --color-brand-foreground: oklch(98% 0 0);
{%- endif %}

  --color-brand: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
  --color-brand-hover: oklch(calc(var(--brand-l) - 8%) var(--brand-c) var(--brand-h));
  --color-brand-muted: oklch(var(--brand-l) calc(var(--brand-c) * 0.4) var(--brand-h));
  /* Chart strokes/fills — defaults to a darker brand variant so charts stay
     readable on light backgrounds even when the brand itself is high-lightness
     (e.g. lime). Dark themes override this to use the bright brand directly. */
  --color-chart: oklch(55% var(--brand-c) var(--brand-h));

  /* Light theme — cream */
  --color-background: oklch(96% 0.005 90);
  --color-foreground: oklch(15% 0 0);
  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(15% 0 0);
  --color-popover: oklch(100% 0 0);
  --color-popover-foreground: oklch(15% 0 0);
  --color-primary: oklch(15% 0 0);
  --color-primary-foreground: oklch(98% 0 0);
  --color-secondary: oklch(93% 0.005 90);
  --color-secondary-foreground: oklch(20% 0 0);
  --color-muted: oklch(93% 0.005 90);
  --color-muted-foreground: oklch(45% 0 0);
  --color-accent: oklch(93% 0.005 90);
  --color-accent-foreground: oklch(20% 0 0);
  --color-destructive: oklch(57.7% 0.245 27.325);
  --color-destructive-foreground: oklch(98.5% 0 0);
  --color-border: oklch(88% 0.005 90);
  --color-input: oklch(88% 0.005 90);
  --color-ring: var(--color-brand);

  /* Radius */
  --radius: 0.5rem;
  --radius-card: 1rem;
  --radius-pill: 999px;

  /* Typography */
  --font-display: var(--font-display), "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: var(--font-body), "Inter", system-ui, sans-serif;
  --font-accent: var(--font-display), "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: var(--font-mono), "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}

/* Dark theme — softer near-black */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-background: oklch(8% 0.005 90);
    --color-foreground: oklch(95% 0.005 90);
    --color-card: oklch(12% 0.005 90);
    --color-card-foreground: oklch(95% 0.005 90);
    --color-popover: oklch(12% 0.005 90);
    --color-popover-foreground: oklch(95% 0.005 90);
    --color-primary: oklch(95% 0 0);
    --color-primary-foreground: oklch(8% 0.005 90);
    --color-secondary: oklch(18% 0.005 90);
    --color-secondary-foreground: oklch(95% 0 0);
    --color-muted: oklch(18% 0.005 90);
    --color-muted-foreground: oklch(63% 0.005 90);
    --color-accent: oklch(20% 0.005 90);
    --color-accent-foreground: oklch(95% 0 0);
    --color-border: oklch(22% 0.005 90);
    --color-input: oklch(22% 0.005 90);
    --color-chart: var(--color-brand);
  }
}

:root.dark {
  --color-background: oklch(8% 0.005 90);
  --color-foreground: oklch(95% 0.005 90);
  --color-card: oklch(12% 0.005 90);
  --color-card-foreground: oklch(95% 0.005 90);
  --color-popover: oklch(12% 0.005 90);
  --color-popover-foreground: oklch(95% 0.005 90);
  --color-primary: oklch(95% 0 0);
  --color-primary-foreground: oklch(8% 0.005 90);
  --color-secondary: oklch(18% 0.005 90);
  --color-secondary-foreground: oklch(95% 0 0);
  --color-muted: oklch(18% 0.005 90);
  --color-muted-foreground: oklch(63% 0.005 90);
  --color-accent: oklch(20% 0.005 90);
  --color-accent-foreground: oklch(95% 0 0);
  --color-border: oklch(22% 0.005 90);
  --color-input: oklch(22% 0.005 90);
  --color-chart: var(--color-brand);
}

/* =========================================================================
   Section-level theme switching (alternating dark/light landing).
   `.theme-dark` and `.theme-light` work regardless of root theme.
   ========================================================================= */

.theme-light {
  --color-background: oklch(96% 0.005 90);
  --color-foreground: oklch(15% 0 0);
  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(15% 0 0);
  --color-muted: oklch(93% 0.005 90);
  --color-muted-foreground: oklch(45% 0 0);
  --color-border: oklch(88% 0.005 90);
}

.theme-dark {
  --color-background: oklch(8% 0.005 90);
  --color-foreground: oklch(95% 0.005 90);
  --color-card: oklch(12% 0.005 90);
  --color-card-foreground: oklch(95% 0.005 90);
  --color-muted: oklch(18% 0.005 90);
  --color-muted-foreground: oklch(63% 0.005 90);
  --color-border: oklch(22% 0.005 90);
  --color-chart: var(--color-brand);
}

@layer base {
  * {
    @apply border-border;
  }
  /* Smooth scroll on document. Dashboard scrolls its <main> element, not the
     document, so this only affects public/marketing pages where html scrolls. */
  html {
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Disable iOS tap highlight — focus rings + active states do the job. */
    -webkit-tap-highlight-color: transparent;
  }
  ::selection {
    background: var(--color-brand);
    color: var(--color-brand-foreground);
  }

  /* Visible focus ring on every interactive element. Browsers handle :focus-visible
     correctly only when we don't override outline universally; here we set a
     consistent brand ring with a 2px offset. */
  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* Remove the default inner button focus ring on Firefox. */
  ::-moz-focus-inner {
    border: 0;
  }

  /* Skip link — hidden until focused. Used in [locale]/layout.tsx. */
  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
    background: var(--color-foreground);
    color: var(--color-background);
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 12px 32px -16px oklch(0% 0 0 / 0.3);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
}

/* =========================================================================
   Typography utilities
   ========================================================================= */

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-accent {
    font-family: var(--font-accent);
    font-style: italic;
  }
  .font-mono {
    font-family: var(--font-mono);
  }

  .text-display-3xl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
  }

  .text-display-2xl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 8vw + 1rem, 7rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .text-display-xl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 6vw + 0.5rem, 5rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }

  .text-display-lg {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw + 0.5rem, 4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
  }

  .text-display-md {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Pill-shaped eyebrow with brand-fill background. Visible on both light & dark
     because it's a solid badge with explicit foreground/background. */
  .eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-brand);
    color: var(--color-brand-foreground);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .eyebrow-badge::before {
    content: "";
    display: inline-block;
    height: 0.4rem;
    width: 0.4rem;
    border-radius: 9999px;
    background: var(--color-brand-foreground);
  }
}

/* Custom scrollbar — theme-aware, derived from --color-foreground.
   Subtle at rest, more visible while the user is hovering the scroll area. */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    /* Firefox: thumb + track. Colors are derived from the foreground so the
       scrollbar reads correctly on both light cream and dark surfaces. */
    scrollbar-color: oklch(from var(--color-foreground) l c h / 0.18) transparent;
    transition: scrollbar-color 150ms ease;
  }

  .scrollbar-thin:hover {
    scrollbar-color: oklch(from var(--color-foreground) l c h / 0.35) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: oklch(from var(--color-foreground) l c h / 0.18);
    border-radius: 9999px;
    /* 2px transparent border + background-clip:padding-box gives a visible
       thumb width of ~4px while keeping a wider hit target. */
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 150ms ease;
  }

  .scrollbar-thin:hover::-webkit-scrollbar-thumb {
    background: oklch(from var(--color-foreground) l c h / 0.35);
    background-clip: padding-box;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover,
  .scrollbar-thin::-webkit-scrollbar-thumb:active {
    background: oklch(from var(--color-foreground) l c h / 0.55);
    background-clip: padding-box;
  }

  .scrollbar-thin::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* =========================================================================
   Marketing utilities
   ========================================================================= */

@layer utilities {
  /* Highlighter swipe behind a key word.
     Implemented as a linear-gradient background, NOT a pseudo-element — text always
     paints above its own background, so the highlight cannot occlude the glyphs. */
  .highlight {
    background-image: linear-gradient(
      to top,
      transparent 8%,
      var(--color-brand) 8%,
      var(--color-brand) 28%,
      transparent 28%
    );
    padding-inline: 0.05em;
  }

  /* Pill nav floating above content */
  .pill-nav {
    border-radius: var(--radius-pill);
    backdrop-filter: blur(12px);
    background: oklch(from var(--color-background) l c h / 0.7);
    border: 1px solid var(--color-border);
  }

  /* Marquee — categories slide.
     `.marquee-strip` is the outer band; `.marquee` is the row clipper;
     `.marquee-track` slides right→left, `.marquee-track-rev` reverses. */
  .marquee {
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-flex;
    gap: 3rem;
    animation: marquee-slide 40s linear infinite;
  }
  .marquee-track-rev {
    animation: marquee-slide 36s linear infinite reverse;
  }
  @keyframes marquee-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  /* Tiny fade+scale entrance for popovers / dropdowns. */
  @keyframes lsFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Subtle radial spotlight backdrop. Uses background-image so the section's
     `bg-background` utility (which sets background-color) keeps providing the
     base color — otherwise the `background:` shorthand would clobber it and
     the section inherits the body's bg, defeating .theme-dark. */
  .spotlight-bg {
    background-image:
      radial-gradient(
        ellipse 80% 60% at 80% 0%,
        oklch(from var(--color-brand) l c h / 0.16),
        transparent 60%
      ),
      radial-gradient(
        ellipse 60% 50% at 0% 100%,
        oklch(from var(--color-brand) l c h / 0.06),
        transparent 70%
      );
  }

  /* Subtle background grid — fades on the edges so it doesn't fight the content */
  .bg-grid {
    background-image:
      linear-gradient(
        to right,
        oklch(from var(--color-foreground) l c h / 0.06) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        oklch(from var(--color-foreground) l c h / 0.06) 1px,
        transparent 1px
      );
    background-size: 64px 64px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  }

  /* Dot grid — subtler than line grid, good for textural sections */
  .bg-dots {
    background-image: radial-gradient(
      oklch(from var(--color-foreground) l c h / 0.1) 1px,
      transparent 1px
    );
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%);
  }

  /* Subtle film grain — barely-there texture for premium feel */
  .grain {
    position: relative;
  }
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  }

  /* 3D perspective tilt for hero demo */
  .tilt-3d {
    transform: perspective(1800px) rotateX(8deg) rotateY(-3deg);
    transform-style: preserve-3d;
  }

  /* Animated dashed flow on SVG paths — used by the data-flow diagram */
  .flow-dash {
    animation: flow-dash 2.6s linear infinite;
  }
  @keyframes flow-dash {
    to {
      stroke-dashoffset: -20;
    }
  }

  /* Pulsing dot — used for "live" indicators (knowledge base nodes etc.) */
  .pulse-dot {
    animation: pulse-dot 2.4s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes pulse-dot {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.85;
    }
    50% {
      transform: scale(1.6);
      opacity: 0.3;
    }
  }

  /* Rotating dashed ring — used on knowledge base node */
  .ring-rotate {
    animation: ring-rotate 22s linear infinite;
  }
  .ring-rotate-rev {
    animation: ring-rotate 30s linear infinite reverse;
  }
  @keyframes ring-rotate {
    to {
      transform: rotate(360deg);
    }
  }

  /* Breathing radial glow — used on knowledge base ambient */
  .glow-breathe {
    animation: glow-breathe 4s ease-in-out infinite;
  }
  @keyframes glow-breathe {
    0%,
    100% {
      opacity: 0.6;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.06);
    }
  }

  /* Comet trail circle — applied to SVG <circle> with <animateMotion>.
     Drop-shadow gives it the soft glow that reads as "speed". */
  .comet {
    filter: drop-shadow(0 0 6px var(--color-brand))
      drop-shadow(0 0 12px oklch(from var(--color-brand) l c h / 0.5));
  }

  /* Floating accent pills around hero demo */
  .float-y {
    animation: float-y 5s ease-in-out infinite;
  }
  .float-y-delayed {
    animation: float-y 6s ease-in-out infinite;
    animation-delay: -2s;
  }
  @keyframes float-y {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  /* Hover lift card */
  .lift {
    transition:
      transform var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }
  .lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -16px oklch(0% 0 0 / 0.18);
  }

  /* Reveal-on-mount (set via JS data attribute for stagger) */
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal-up var(--duration-slow) var(--ease-out) forwards;
  }
  @keyframes reveal-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Hover lift only when the device supports hover — touch devices skip the
     transform so taps don't feel sticky. */
  @media (hover: none) {
    .lift:hover {
      transform: none;
      box-shadow: none;
    }
  }
}

/* =========================================================================
   Reduced-motion — strip every long-running animation. Honors a11y opt-in.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Hide the kinetic decorations entirely — they have no informational value. */
  .marquee-track,
  .marquee-track-rev,
  .float-y,
  .float-y-delayed,
  .ring-rotate,
  .ring-rotate-rev,
  .glow-breathe,
  .pulse-dot,
  .flow-dash,
  .comet {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   Long-form prose — used by legal pages, blog posts, help articles.
   Keeps line-length comfortable, preserves typographic rhythm.
   ========================================================================= */

@layer components {
  .prose-marketing {
    color: oklch(from var(--color-foreground) l c h / 0.85);
    font-size: 1rem;
    line-height: 1.75;
  }
  .prose-marketing p,
  .prose-marketing ul,
  .prose-marketing ol,
  .prose-marketing blockquote {
    margin-block: 1.25em;
  }
  .prose-marketing h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    color: var(--color-foreground);
  }
  .prose-marketing h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: var(--color-foreground);
  }
  .prose-marketing h4 {
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.5em;
    margin-bottom: 0.25em;
    color: var(--color-foreground);
  }
  .prose-marketing a {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: oklch(from var(--color-foreground) l c h / 0.3);
    transition: text-decoration-color var(--duration-fast) var(--ease-out);
  }
  .prose-marketing a:hover {
    text-decoration-color: var(--color-brand);
  }
  .prose-marketing ul {
    list-style: disc;
    padding-left: 1.5em;
  }
  .prose-marketing ol {
    list-style: decimal;
    padding-left: 1.5em;
  }
  .prose-marketing li::marker {
    color: oklch(from var(--color-foreground) l c h / 0.4);
  }
  .prose-marketing li {
    padding-left: 0.25em;
  }
  .prose-marketing strong {
    color: var(--color-foreground);
    font-weight: 600;
  }
  .prose-marketing code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 0.4em;
    background: oklch(from var(--color-foreground) l c h / 0.05);
    color: var(--color-foreground);
  }
  .prose-marketing pre {
    background: oklch(from var(--color-foreground) l c h / 0.05);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-block: 1.5em;
  }
  .prose-marketing pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
  .prose-marketing blockquote {
    border-left: 3px solid var(--color-brand);
    padding-left: 1.25em;
    color: oklch(from var(--color-foreground) l c h / 0.7);
    font-style: italic;
  }
  .prose-marketing hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 3em auto;
    width: 60%;
  }
  .prose-marketing img {
    border-radius: 0.75rem;
    margin-block: 2em;
  }
  .prose-marketing > :first-child {
    margin-top: 0;
  }
  .prose-marketing > :last-child {
    margin-bottom: 0;
  }
}

/* =========================================================================
   Code syntax highlighting (preserved from original)
   ========================================================================= */

@layer base {
  pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 0;
    background: transparent;
  }
  code.hljs {
    padding: 3px 5px;
  }
  .hljs {
    color: #24292e;
  }
  .hljs-comment,
  .hljs-quote {
    color: #6a737d;
    font-style: italic;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal {
    color: #d73a49;
  }
  .hljs-name,
  .hljs-tag {
    color: #22863a;
  }
  .hljs-attr,
  .hljs-attribute {
    color: #6f42c1;
  }
  .hljs-variable,
  .hljs-template-variable,
  .hljs-regexp,
  .hljs-link {
    color: #005cc5;
  }
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet {
    color: #032f62;
  }
  .hljs-number {
    color: #005cc5;
  }
  .hljs-meta,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-type,
  .hljs-params {
    color: #e36209;
  }
  .hljs-function .hljs-title {
    color: #6f42c1;
  }
  .hljs-addition {
    color: #22863a;
    background-color: #f0fff4;
  }
  .hljs-deletion {
    color: #b31d28;
    background-color: #ffeef0;
  }

  .dark .hljs,
  .theme-dark .hljs {
    color: #e1e4e8;
  }
  .dark .hljs-comment,
  .dark .hljs-quote,
  .theme-dark .hljs-comment,
  .theme-dark .hljs-quote {
    color: #6a737d;
  }
  .dark .hljs-keyword,
  .dark .hljs-selector-tag,
  .dark .hljs-literal,
  .theme-dark .hljs-keyword,
  .theme-dark .hljs-selector-tag,
  .theme-dark .hljs-literal {
    color: #ff7b72;
  }
  .dark .hljs-name,
  .dark .hljs-tag,
  .theme-dark .hljs-name,
  .theme-dark .hljs-tag {
    color: #7ee787;
  }
  .dark .hljs-attr,
  .dark .hljs-attribute,
  .theme-dark .hljs-attr,
  .theme-dark .hljs-attribute {
    color: #d2a8ff;
  }
  .dark .hljs-string,
  .dark .hljs-symbol,
  .dark .hljs-bullet,
  .theme-dark .hljs-string,
  .theme-dark .hljs-symbol,
  .theme-dark .hljs-bullet {
    color: #a5d6ff;
  }
  .dark .hljs-number,
  .theme-dark .hljs-number {
    color: #79c0ff;
  }
  .dark .hljs-meta,
  .dark .hljs-built_in,
  .dark .hljs-builtin-name,
  .dark .hljs-type,
  .dark .hljs-params,
  .theme-dark .hljs-meta,
  .theme-dark .hljs-built_in,
  .theme-dark .hljs-builtin-name,
  .theme-dark .hljs-type,
  .theme-dark .hljs-params {
    color: #ffa657;
  }
  .dark .hljs-function .hljs-title,
  .theme-dark .hljs-function .hljs-title {
    color: #d2a8ff;
  }
  .dark .hljs-addition,
  .theme-dark .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
  }
  .dark .hljs-deletion,
  .theme-dark .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
  }
}
