/*
 * callout.css — inline callouts authored as `callout` blocks. Five
 * variants (.callout--tip / info / warning / danger / success).
 *
 * Visual technique borrowed from app-store's hero: a soft radial
 * "blob" of the variant color glows from the top-left corner of the
 * card. The blob lives in a ::before pseudo-element with a radial
 * gradient at low alpha, blurred via filter — keeps the DOM clean,
 * scales per variant by swapping a single CSS custom property.
 */

.callout {
    position: relative;
    display: block;
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-4);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background: hsl(var(--card));
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    overflow: hidden;
    isolation: isolate;
}

/* The aurora blob — sits behind the text via z-index, off the
   top-left corner. --callout-glow is set per-variant below. */
.callout::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        var(--callout-glow, hsl(var(--foreground) / 0.05)) 0%,
        transparent 60%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(20px);
}

.callout-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1_5);
}

.callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
}
.callout-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}
/* Standalone icon (untitled callout) sits inline with the body's
   first line — float so the body wraps. */
.callout-icon--standalone {
    float: left;
    margin: 4px var(--space-2) 0 0;
}

.callout-title {
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: var(--leading-tight);
}

.callout-body {
    color: hsl(var(--foreground) / 0.9);
}
.callout-body > p:first-child { margin-top: 0; }
.callout-body > p:last-child  { margin-bottom: 0; }
.callout-body code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: hsl(var(--muted));
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* ------------ Variants ------------
   Glow palette pulled from app-store's hero blobs (purple/blue/cyan/
   indigo at Tailwind 400-600 intensities). Cohesive aurora across
   all callouts — the icon carries the semantic cue, not the glow.
   `danger` keeps its red because the warning signal is load-bearing.
*/
.callout--info {
    /* blue-600 */
    --callout-glow: hsl(221 83% 53% / 0.2);
    border-color: hsl(221 83% 53% / 0.3);
}
.callout--info .callout-icon { color: hsl(221 83% 70%); }

.callout--tip {
    /* purple-600 — app-store's marquee glow */
    --callout-glow: hsl(263 70% 50% / 0.22);
    border-color: hsl(263 70% 50% / 0.32);
}
.callout--tip .callout-icon { color: hsl(263 70% 70%); }

.callout--success {
    /* cyan-600 */
    --callout-glow: hsl(192 91% 36% / 0.22);
    border-color: hsl(192 91% 36% / 0.32);
}
.callout--success .callout-icon { color: hsl(192 80% 60%); }

.callout--warning {
    /* indigo-500 */
    --callout-glow: hsl(239 84% 67% / 0.22);
    border-color: hsl(239 84% 67% / 0.32);
}
.callout--warning .callout-icon { color: hsl(239 84% 75%); }

.callout--danger {
    /* Real warning red — semantics over palette cohesion. */
    --callout-glow: hsl(0 75% 55% / 0.22);
    border-color: hsl(0 75% 55% / 0.35);
}
.callout--danger .callout-icon { color: hsl(0 80% 70%); }

/* ------------ Light-theme override ------------
   Callouts stay dark in light mode (same call as the endpoint card —
   the aurora glow only reads right against a near-black surface, and
   pulling that into a white page actually keeps the visual rhythm
   consistent across themes).

   Mechanism: re-scope the design tokens locally so every nested rule
   (.callout-title, .callout-icon, inline `code` chips) reads dark
   values, then re-pin the card background + the original dark-mode
   glow alphas so the gradient pops the same way it does in dark.
*/
:root[data-theme="light"] .callout {
    --foreground: 0 0% 98%;
    --card: 0 0% 7%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 60%;
    --border: 0 0% 14%;
    --color-inline-code-bg: hsl(0 0% 14%);
    --color-inline-code-border: hsl(0 0% 18%);
    --color-inline-code-text: hsl(0 0% 98%);

    background: hsl(0 0% 7%);
    color: hsl(0 0% 98%);
    border-color: hsl(0 0% 14%);
}

/* Restore the dark-mode glow alphas + icon colours so the per-variant
   aurora pops the same way it does in dark mode. */
:root[data-theme="light"] .callout--info {
    --callout-glow: hsl(221 83% 53% / 0.2);
    border-color: hsl(221 83% 53% / 0.3);
}
:root[data-theme="light"] .callout--info .callout-icon { color: hsl(221 83% 70%); }

:root[data-theme="light"] .callout--tip {
    --callout-glow: hsl(263 70% 50% / 0.22);
    border-color: hsl(263 70% 50% / 0.32);
}
:root[data-theme="light"] .callout--tip .callout-icon { color: hsl(263 70% 70%); }

:root[data-theme="light"] .callout--success {
    --callout-glow: hsl(192 91% 36% / 0.22);
    border-color: hsl(192 91% 36% / 0.32);
}
:root[data-theme="light"] .callout--success .callout-icon { color: hsl(192 80% 60%); }

:root[data-theme="light"] .callout--warning {
    --callout-glow: hsl(239 84% 67% / 0.22);
    border-color: hsl(239 84% 67% / 0.32);
}
:root[data-theme="light"] .callout--warning .callout-icon { color: hsl(239 84% 75%); }

:root[data-theme="light"] .callout--danger {
    --callout-glow: hsl(0 75% 55% / 0.22);
    border-color: hsl(0 75% 55% / 0.35);
}
:root[data-theme="light"] .callout--danger .callout-icon { color: hsl(0 80% 70%); }