/* ═══════════════════════════════════════════════════════════════════
   FUND COLLECTIVE — SHARED UI FOUNDATION  (css/fc-ui.css)
   ONE source of truth for buttons, cards, and shared accent tokens.
   Loaded FIRST in every area (public, member/dashboard, admin, assess)
   so a change here lands everywhere. Colours are explicit + theme-aware
   so these classes work regardless of an area's own token names.
   Accent = blue (#159ECE dark / #0e7ba3 light). Gold is retired except
   the dashboard earned-score motif (--score-color, defined elsewhere).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --fc-accent:      #159ECE;
    --fc-accent-ink:  #ffffff;   /* text on accent */
    --fc-accent-soft: rgba(21,158,206,0.12);
    --fc-accent-glow: rgba(21,158,206,0.30);
    --fc-ink:         #ffffff;   /* the "primary dark button" surface flips per theme */
    --fc-ink-text:    #0e1726;
    --fc-ok:          #22c55e;
    --fc-warn:        #E8A020;
    --fc-danger:      #E05252;
    --fc-card-sheen:  rgba(255,255,255,0.06);
    --fc-card-line:   rgba(255,255,255,0.32);
}
[data-theme="light"] {
    --fc-accent:      #0e7ba3;
    --fc-accent-soft: rgba(14,123,163,0.10);
    --fc-accent-glow: rgba(14,123,163,0.18);
    --fc-ink:         #122340;
    --fc-ink-text:    #ffffff;
    --fc-card-sheen:  rgba(255,255,255,0.55);
    --fc-card-line:   rgba(255,255,255,0.9);
}

/* ─── Buttons ────────────────────────────────────────────────────────
   .fc-btn base + one variant class. Readable in BOTH themes by design. */
.fc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 600; font-size: 0.85rem; line-height: 1.2;
    padding: 10px 20px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .2s cubic-bezier(0.16,1,0.3,1), box-shadow .3s, filter .2s, background .2s, border-color .2s, color .2s;
}
.fc-btn:hover { transform: translateY(-1px); }
.fc-btn:active { transform: translateY(0); }
.fc-btn:disabled, .fc-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Primary = solid accent blue, white text (the everyday action button) */
.fc-btn--primary { background: var(--fc-accent); color: #fff; box-shadow: 0 4px 14px var(--fc-accent-glow); }
.fc-btn--primary:hover { filter: brightness(1.07); box-shadow: 0 7px 22px var(--fc-accent-glow); }

/* Ink = the navy/near-white "hero" primary (navy in light, near-white in dark) */
.fc-btn--ink { background: var(--fc-ink); color: var(--fc-ink-text); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.fc-btn--ink:hover { filter: brightness(1.04); box-shadow: 0 10px 28px rgba(0,0,0,0.28); }

/* Ghost = outline, accent on hover */
.fc-btn--ghost { background: transparent; border-color: currentColor; color: var(--fc-accent); opacity: 0.9; }
.fc-btn--ghost:hover { opacity: 1; box-shadow: 0 0 0 3px var(--fc-accent-soft); }

/* Semantic */
.fc-btn--danger { background: var(--fc-danger); color: #fff; }
.fc-btn--warn   { background: var(--fc-warn); color: #1a1200; }
.fc-btn--success{ background: var(--fc-ok); color: #06210f; }

/* Sizes + shapes */
.fc-btn--sm  { padding: 6px 13px; font-size: 0.72rem; border-radius: 8px; gap: 5px; }
.fc-btn--lg  { padding: 15px 32px; font-size: 1rem; border-radius: 50px; }
.fc-btn--pill{ border-radius: 50px; }
.fc-btn--block { display: flex; width: 100%; }

/* Signal dot (draw-attention CTA) */
.fc-btn--signal { position: relative; overflow: visible; }
.fc-btn--signal::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--fc-ok); border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: fc-signal 2.2s cubic-bezier(0.66,0,0,1) infinite;
}
@keyframes fc-signal { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ─── Cards (glass) ──────────────────────────────────────────────────
   .fc-card = the universal glass card (sheen + top gloss + depth). */
.fc-card {
    position: relative; border-radius: 18px; padding: 1.5rem;
    background: linear-gradient(158deg, var(--fc-card-sheen) 0%, transparent 55%), rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 6px 26px rgba(0,0,0,0.18), inset 1px 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
}
[data-theme="light"] .fc-card {
    background: linear-gradient(158deg, var(--fc-card-sheen) 0%, transparent 55%), rgba(255,255,255,0.7);
    border-color: rgba(18,35,64,0.08);
    box-shadow: 0 8px 26px rgba(18,35,64,0.06), inset 1px 1px 0 rgba(255,255,255,0.9);
}
.fc-card::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--fc-card-line), transparent);
}
.fc-card--hover { transition: transform .5s cubic-bezier(0.16,1,0.3,1), box-shadow .5s, border-color .4s; }
.fc-card--hover:hover { transform: translateY(-5px); border-color: var(--fc-accent); box-shadow: 0 18px 44px rgba(0,0,0,0.24), 0 0 0 1px var(--fc-accent-glow); }