/* ============================================================
   AGENT BRAND PALETTES — per-agent visual identity
   ============================================================
   Sprint 2026-04-25G23 — each AI agent in the Data Riders portfolio
   gets its own brand colorway, just like TCM Assessor (copper) had
   from day one. The base .agent-card stays neutral; modifier
   classes (.agent-card--<slug>) override:

   1) icon background gradient (the rounded square BEHIND the icon)
   2) accent color used by the tag, hover border, glow & "Run" button
   3) header glow on hover

   Icons themselves are TRANSPARENT PNGs so the brand gradient
   shows through cleanly on the dark site background (#0D1B2A).
   ============================================================ */

/* Default neutral fallback (kept identical to legacy look). */
.agent-card {
    --agent-accent: #4A9EFF;
    --agent-accent-2: #7B68EE;
    --agent-icon-bg: linear-gradient(135deg, #1a2236, #12182a);
    --agent-icon-border: rgba(255,255,255,0.08);
    --agent-glow: rgba(74,158,255,0.35);
}

/* The icon container becomes a branded rounded-square; the PNG glyph
   sits on top with its transparent background, so we see the gradient. */
.agent-card .agent-icon {
    background: var(--agent-icon-bg);
    border: 1px solid var(--agent-icon-border);
    object-fit: contain;          /* glyph stays inside, never crops */
    padding: 8px;                  /* breathing room around glyph */
    box-shadow: 0 10px 24px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--agent-icon-border) inset;
}

/* Tag adopts the brand accent. */
.agent-card .agent-card-tag {
    color: var(--agent-accent);
}

/* Hover state uses the brand glow instead of the default DR blue. */
.agent-card:hover {
    border-color: color-mix(in srgb, var(--agent-accent) 40%, transparent);
    box-shadow: 0 20px 40px -20px var(--agent-glow);
}

/* Card hover overlay tint adapts too. */
.agent-card::before {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--agent-accent) 12%, transparent),
        color-mix(in srgb, var(--agent-accent-2) 8%, transparent));
}

/* "Run" button picks up the brand gradient. */
.agent-card .agent-btn-open {
    background: linear-gradient(135deg, var(--agent-accent), var(--agent-accent-2));
}

/* "Learn more" hover hint also follows the brand. */
.agent-card .agent-btn-info:hover {
    background: color-mix(in srgb, var(--agent-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--agent-accent) 35%, transparent);
}

/* ---------- RIDE Agent — Data Riders blue/purple (default) ---------- */
.agent-card--ride {
    --agent-accent: #4A9EFF;
    --agent-accent-2: #7B68EE;
    --agent-icon-bg: linear-gradient(135deg, #1B2A4A, #2D3F6F);
    --agent-icon-border: rgba(123,104,238,0.30);
    --agent-glow: rgba(74,158,255,0.40);
}

/* ---------- AquaTwin — water cyan / deep navy ---------- */
.agent-card--aquatwin {
    --agent-accent: #2ED3E6;
    --agent-accent-2: #1C7FAF;
    --agent-icon-bg: radial-gradient(circle at 30% 30%, #1C7FAF 0%, #0F2B4C 70%);
    --agent-icon-border: rgba(46,211,230,0.35);
    --agent-glow: rgba(46,211,230,0.45);
}

/* ---------- TSM.AI v2 — editorial parchment / burgundy ---------- */
.agent-card--tsm {
    --agent-accent: #8A1F2B;
    --agent-accent-2: #5A2A14;
    --agent-icon-bg: linear-gradient(135deg, #F4E9CF 0%, #E9D8B8 100%);
    --agent-icon-border: rgba(138,31,43,0.35);
    --agent-glow: rgba(138,31,43,0.40);
}
.agent-card--tsm .agent-btn-open {
    background: linear-gradient(135deg, #8A1F2B, #5A2A14);
    color: #F4E9CF;
}

/* ---------- CMSI AI Assessor — editorial parchment / wine ---------- */
.agent-card--cmsi {
    --agent-accent: #7E1730;
    --agent-accent-2: #1B1B1B;
    --agent-icon-bg: linear-gradient(135deg, #F4E7C8 0%, #E5D4B0 100%);
    --agent-icon-border: rgba(126,23,48,0.35);
    --agent-glow: rgba(126,23,48,0.40);
}
.agent-card--cmsi .agent-btn-open {
    background: linear-gradient(135deg, #7E1730, #1B1B1B);
    color: #F4E7C8;
}

/* ---------- GISTM.ai — compliance blue ---------- */
.agent-card--gistm {
    --agent-accent: #4A9EFF;
    --agent-accent-2: #1B3A5C;
    --agent-icon-bg: linear-gradient(135deg, #1B3A5C 0%, #4A9EFF 100%);
    --agent-icon-border: rgba(74,158,255,0.40);
    --agent-glow: rgba(74,158,255,0.45);
}

/* ---------- TCM AI Assessor — copper ---------- */
.agent-card--tcm {
    --agent-accent: #B87333;
    --agent-accent-2: #5C2E0B;
    --agent-icon-bg: linear-gradient(135deg, #5C2E0B 0%, #B87333 60%, #D89759 100%);
    --agent-icon-border: rgba(184,115,51,0.40);
    --agent-glow: rgba(184,115,51,0.45);
}

/* ---------- Muiraquitãna — Amazon forest greens ---------- */
.agent-card--muiraquitana {
    --agent-accent: #7AB31E;
    --agent-accent-2: #2D5016;
    --agent-icon-bg: linear-gradient(135deg, #2D5016 0%, #5F8A3A 50%, #8FB339 100%);
    --agent-icon-border: rgba(122,179,30,0.40);
    --agent-glow: rgba(122,179,30,0.45);
}

/* ---------- Data Riders Agent — DR navy / electric blue ---------- */
.agent-card--dr {
    --agent-accent: #46A6FF;
    --agent-accent-2: #1B1C55;
    --agent-icon-bg: linear-gradient(135deg, #0D1B2A 0%, #1B1C55 60%, #46A6FF 100%);
    --agent-icon-border: rgba(70,166,255,0.40);
    --agent-glow: rgba(70,166,255,0.45);
}

/* ============================================================
   MOBILE & COMPACT TWEAKS
   The .agents-store.compact variant (used on the homepage) shrinks
   the icon to 60px — keep the brand gradient & padding, but tighten
   the inner padding so the glyph still reads.
   ============================================================ */
.agents-store.compact .agent-card .agent-icon {
    padding: 6px;
}

/* ============================================================
   ACCESSIBILITY
   Ensure decent contrast for the tag on the parchment cards
   (the cream icon background can otherwise blur into the dark
   card body). The tag sits on the dark card, not on the icon,
   so the original brand accent works — but we add a subtle
   text shadow for the burgundy/wine hues which sit at the
   lower end of the perceptual luminance range.
   ============================================================ */
.agent-card--tsm .agent-card-tag,
.agent-card--cmsi .agent-card-tag {
    text-shadow: 0 0 1px rgba(255,255,255,0.05);
}

/* ============================================================
   FALLBACK for browsers without color-mix() support
   (very old Safari / Edge). Use plain rgba().
   ============================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
    .agent-card--ride { box-shadow: none; }
    .agent-card:hover { border-color: rgba(74,158,255,0.35); }
    .agent-card::before {
        background: linear-gradient(135deg, rgba(74,158,255,0.06), rgba(123,104,238,0.04));
    }
    .agent-card .agent-btn-info:hover {
        background: rgba(74,158,255,0.12);
        border-color: rgba(74,158,255,0.35);
    }
}