/* ==========================================================================
   Symfony AI — Base layer
   Element resets, the shared brand color-shift animation, and a few
   structural helpers used across cards, components and UI kits.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--text-strong);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: var(--link);
}

code,
pre,
kbd {
    font-family: var(--font-mono);
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}

/* ---- Brand color-shift -------------------------------------------------
   One 60s loop, run independently by every participating element on the
   shared wall-clock so nothing drifts. Drives SVG fill AND background-color
   so the same keyframes animate logos, diagram rects and color blocks. */
@keyframes sf-color-shift {
    0% {
        fill: #5a55a5;
        background-color: #5a55a5;
    }
    25% {
        fill: #4c1d95;
        background-color: #4c1d95;
    }
    50% {
        fill: #db2777;
        background-color: #db2777;
    }
    75% {
        fill: #1d4ed8;
        background-color: #1d4ed8;
    }
    100% {
        fill: #5a55a5;
        background-color: #5a55a5;
    }
}
.sf-color-shift {
    animation: sf-color-shift var(--dur-shift) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .sf-color-shift {
        animation: none;
    }
}

/* ---- Title underline accent (the "section-heading" motif) -------------- */
.sf-heading-accent {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-3);
}
.sf-heading-accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--gradient-brand);
}

/* ---- Tintable SymfonyAI logo parts (for the inlined site logo SVG) ----- */
.logo-icon {
    fill: var(--logo-icon);
}
.logo-emblem {
    fill: var(--logo-emblem);
}
.logo-text {
    fill: var(--logo-text);
}
.logo-ai {
    fill: var(--logo-ai);
}

/* ---- Generic container ------------------------------------------------- */
.sf-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-5);
}