/* ============================================================================
   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=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ── NAVY (primary) ──────────────────────────────────────────────────── */
    --qc-navy:        #1E1611;   /* background top     */
    --qc-navy-2:      #171008;   /* background mid     */
    --qc-ink:         #12100C;   /* background deep    */
    --qc-ink-2:       #0D0B07;   /* footer bg          */

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

    /* ── Text ────────────────────────────────────────────────────────────── */
    --qc-cream:       #F7F3ED;   /* 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 ────────────────────────────────────────────────────────────── */
    /* One family, everywhere. The display/body split is kept as token names so
       existing pages keep working, but both resolve to the same face — the
       hierarchy now comes from size and weight alone, not from a second font. */
    --qc-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --qc-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --qc-font-num:     'Inter', system-ui, -apple-system, 'Segoe UI', 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, #1E1611 0%, #171008 55%, #12100C 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: normal; }

/* Headings: one family means the weight has to do the work the serif used to.
   Slight negative tracking keeps large sans headlines from looking loose. */
h1, h2, h3, h4 {
    font-family: var(--qc-font-display);
    font-weight: 600;
    letter-spacing: -0.021em;
}
h1 { letter-spacing: -0.028em; }

/* Figures line up in columns — matters on the dashboard and fee tables. */
.qc-num, table td, table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* The accent phrase inside a headline. Was an italic gold gradient on every
   heading on the site, which made it texture rather than emphasis. Now a flat
   colour shift — still reads as the emphasised clause, but quietly. */
.qc-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: var(--qc-gold-light);
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* the eyebrow: tracked caps in the accent colour. No leading rule — it read
   as decoration rather than punctuation. */
.qc-eyebrow {
    display: inline-block;
    font-family: var(--qc-font-body);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--qc-gold);
}

/* buttons */
.qc-btn {
    display: inline-block;
    font-family: var(--qc-font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 26px;
    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);
    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);
}

/* client login: filled espresso + gold edge, so it reads as a button on both the
   ivory pages and the dark hero, and never blends into the plain nav links */
.qc-btn-login,
.navlinks a.qc-btn-login {
    background: #1E1611;
    color: #F7F3ED;
    border: 1.5px solid #A67242;
}
.qc-btn-login:hover,
.navlinks a.qc-btn-login:hover {
    background: #A67242;
    color: #1E1611;
    border-color: #A67242;
    transform: translateY(-2px);
}

/* 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.01em;
    color: var(--qc-muted);
    opacity: 0.7;
    text-align: center;
}