/* ============================================
   Acelero.ai — Extended Palette CSS
   Missing classes when Tailwind CDN is replaced with
   pre-compiled CSS. Safe to keep alongside CDN too.
   ============================================ */

:root {
    --ac-primary: #E85D24;
    --ac-inverse-surface: #392e2b;
    --ac-inverse-on-surface: #ffede7;
    --ac-on-surface: #231a16;
    --ac-on-surface-variant: #55433c;
    --ac-outline: #88726b;
    --ac-outline-variant: #dcc1b8;
    --ac-surface: #fff8f6;
    --ac-surface-container-low: #fff1ec;
    --ac-surface-container: #fceae4;
    --ac-surface-container-high: #f7e4df;
    --ac-surface-container-highest: #f1dfd9;
    --ac-surface-container-lowest: #ffffff;
    --ac-secondary-container: #fec1ab;
    --ac-on-secondary-container: #7a4d3c;
    --ac-primary-fixed-dim: #ffb59a;
}

/* ---- Background colors ---- */
.bg-inverse-surface           { background-color: var(--ac-inverse-surface) !important; }
.bg-on-surface                { background-color: var(--ac-on-surface); }
.bg-primary                   { background-color: var(--ac-primary); }
.bg-primary\/5                { background-color: rgb(152 67 32 / 0.05); }
.bg-primary\/10               { background-color: rgb(152 67 32 / 0.1); }
.bg-primary\/15               { background-color: rgb(152 67 32 / 0.15); }
.bg-primary\/20               { background-color: rgb(152 67 32 / 0.2); }
.bg-primary\/40               { background-color: rgb(152 67 32 / 0.4); }
.bg-surface                   { background-color: var(--ac-surface); }
.bg-surface-container-low     { background-color: var(--ac-surface-container-low); }
.bg-surface-container         { background-color: var(--ac-surface-container); }
.bg-surface-container-high    { background-color: var(--ac-surface-container-high); }
.bg-surface-container-highest { background-color: var(--ac-surface-container-highest); }
.bg-surface-container-lowest  { background-color: var(--ac-surface-container-lowest); }
.bg-secondary-container       { background-color: var(--ac-secondary-container); }
.bg-secondary-container\/20   { background-color: rgb(254 193 171 / 0.2); }
.bg-outline-variant\/30       { background-color: rgb(220 193 184 / 0.3); }
.bg-outline-variant\/40       { background-color: rgb(220 193 184 / 0.4); }

/* ---- Text colors ---- */
.text-primary                  { color: var(--ac-primary); }
.text-primary\/50              { color: rgb(152 67 32 / 0.5); }
.text-primary-fixed-dim        { color: var(--ac-primary-fixed-dim); }
.text-on-surface               { color: var(--ac-on-surface); }
.text-on-surface-variant       { color: var(--ac-on-surface-variant); }
.text-on-surface-variant\/30   { color: rgb(85 67 60 / 0.3); }
.text-on-surface-variant\/60   { color: rgb(85 67 60 / 0.6); }
.text-outline                  { color: var(--ac-outline); }
.text-outline-variant          { color: var(--ac-outline-variant); }
.text-inverse-on-surface       { color: var(--ac-inverse-on-surface); }
.text-inverse-on-surface\/70   { color: rgb(255 237 231 / 0.7); }
.text-on-secondary-container   { color: var(--ac-on-secondary-container); }

/* ---- Border colors ---- */
.border-primary\/10            { border-color: rgb(152 67 32 / 0.1); }
.border-primary\/20            { border-color: rgb(152 67 32 / 0.2); }
.border-primary\/30            { border-color: rgb(152 67 32 / 0.3); }
.border-primary\/40            { border-color: rgb(152 67 32 / 0.4); }
.border-outline-variant\/10    { border-color: rgb(220 193 184 / 0.1); }
.border-outline-variant\/20    { border-color: rgb(220 193 184 / 0.2); }
.border-outline-variant\/30    { border-color: rgb(220 193 184 / 0.3); }

/* ---- Shadow ---- */
.shadow-primary\/20 {
    --tw-shadow-color: rgb(152 67 32 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}

/* ---- Fill ---- */
.fill-primary { fill: var(--ac-primary); }

/* ---- Gradient ---- */
.from-on-surface\/20 {
    --tw-gradient-from: rgb(35 26 22 / 0.2) var(--tw-gradient-from-position);
}
.to-primary {
    --tw-gradient-to: var(--ac-primary) var(--tw-gradient-to-position);
}

/* ---- Focus ring ---- */
.focus\:ring-primary\/40:focus {
    --tw-ring-color: rgb(152 67 32 / 0.4);
}

/* ---- Team page: photo wrapper with initials fallback ---- */
/*
 * How it works: ::after renders initials (always present, z-index 0).
 * <img> sits above at z-index 1. If image fails to load, browser
 * removes it and initials show through. No JS needed, CSP-safe.
 * ::after on <img> itself doesn't work — target must be the wrapper.
 */
.person-photo-wrap {
    background: var(--ac-surface, #fff8f6);  /* --ac-surface = #fff8f6 in acelero-extended-palette.css :root */
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.person-photo-wrap::after {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-weight: 900;
    color: #73726C;  /* ink muted — no matching CSS var in codebase, using hardcoded value */
    font-size: 24px;
    z-index: 0;
    pointer-events: none;
}
.person-photo-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    display: block;
}