/* ============================================================================
   QUANTIS CAPITAL — BRAND TOKENS
   Single source of truth for every surface: public site, login page, dashboard.
   Locked identity from BRAND_SYSTEM.md.

   Rule: NAVY palette for all adviser/planning/education content.
         EMERALD palette is reserved for markets/trading-reality content only
         (not used on the wealth site).

   To use in Streamlit: inject this file's :root vars via st.markdown, then
   reference --qc-* variables in component CSS.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* ── NAVY (primary) ──────────────────────────────────────────────────── */
    --qc-navy:        #0B2347;   /* background top     */
    --qc-navy-2:      #081A33;   /* background mid     */
    --qc-ink:         #061222;   /* background deep    */
    --qc-ink-2:       #040d1a;   /* footer bg          */

    /* ── Gold accents ────────────────────────────────────────────────────── */
    --qc-gold:        #C9A24B;
    --qc-gold-light:  #E3C88A;
    --qc-gold-glow:   rgba(201, 162, 75, 0.18);

    /* ── Text ────────────────────────────────────────────────────────────── */
    --qc-cream:       #F5F1E8;   /* primary text       */
    --qc-muted:       rgba(245, 241, 232, 0.66);
    --qc-hairline:    rgba(201, 162, 75, 0.18);

    /* ── Semantics for dashboards (net worth, gains, losses) ─────────────── */
    --qc-gain:        #4ADE80;   /* soft green         */
    --qc-loss:        #F87171;   /* soft red           */
    --qc-neutral:     var(--qc-gold-light);

    /* ── Type ────────────────────────────────────────────────────────────── */
    --qc-font-display: 'Fraunces', Georgia, serif;
    --qc-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* ── Radii / spacing ─────────────────────────────────────────────────── */
    --qc-radius-sm:   6px;
    --qc-radius-md:   10px;
    --qc-radius-lg:   14px;
    --qc-radius-xl:   16px;

    /* ── Gradients (reusable) ────────────────────────────────────────────── */
    --qc-bg-gradient: linear-gradient(158deg, #0B2347 0%, #081A33 55%, #061222 100%);
    --qc-gold-gradient: linear-gradient(92deg, var(--qc-gold), var(--qc-gold-light));
}

/* ── SHARED PRIMITIVES ────────────────────────────────────────────────────── */

.qc-serif   { font-family: var(--qc-font-display); }
.qc-body    { font-family: var(--qc-font-body); }
.qc-italic  { font-style: italic; }

/* the italic-gold accent phrase used on every card, slide, and hero */
.qc-accent {
    font-family: var(--qc-font-display);
    font-style: italic;
    background: var(--qc-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* the eyebrow: tracked gold caps preceded by a short gold tick rule */
.qc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--qc-font-body);
    font-size: 13px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--qc-gold);
}
.qc-eyebrow::before {
    content: "";
    width: 42px;
    height: 2px;
    background: var(--qc-gold-gradient);
}

/* buttons */
.qc-btn {
    display: inline-block;
    font-family: var(--qc-font-body);
    font-weight: 700;
    font-size: 15px;
    padding: 15px 28px;
    border-radius: var(--qc-radius-sm);
    cursor: pointer;
    border: none;
    transition: transform 0.25s, box-shadow 0.25s;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1;
}
.qc-btn-gold {
    background: var(--qc-gold-gradient);
    color: var(--qc-ink);
}
.qc-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(201, 162, 75, 0.5);
}
.qc-btn-ghost {
    background: transparent;
    color: var(--qc-cream);
    border: 1.5px solid var(--qc-hairline);
}
.qc-btn-ghost:hover {
    border-color: var(--qc-gold);
    color: var(--qc-gold-light);
}

/* hairline rule (above disclaimer) */
.qc-hairline {
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, var(--qc-gold-light), transparent);
    margin: 24px auto;
}

/* the compliance disclaimer — appears on every surface */
.qc-disclaimer {
    font-family: var(--qc-font-body);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qc-muted);
    opacity: 0.7;
    text-align: center;
}