/* =====================================================================
   TRam Studio Theme
   Re-skins the app to the TRam Enterprise design system by redefining
   the existing CSS variables (navy / gold / cream) and theming the
   hardcoded high-visibility surfaces (hero, brand, buttons) + fonts.
   Loaded LAST in _Layout so it overrides site.css :root.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* --- existing token names remapped to TRam palette --- */
    --blue: #C9A227;        /* primary accent  -> TRam gold (links, nav underline, primary btn) */
    --blue-dk: #0C1F3F;     /* dark surface    -> TRam navy (topbar, primary btn hover)         */
    --blue-lt: #FBF4E2;     /* light tint      -> warm cream                                    */
    --sky: #E8C547;         /* secondary accent-> gold light                                    */
    --navy: #0A1733;        /* deep navy                                                         */
    --white: #FFFFFF;
    --off-white: #FAF6EC;   /* cream                                                             */
    --gray-lt: #F3EEE1;
    --gray-dk: #6B6358;
    --text: #1A1614;        /* TRam ink                                                          */
    --text-lt: #5A5048;
    --border: #E6DCC8;      /* warm border                                                       */

    /* --- explicit TRam tokens for the theme layer --- */
    --gold: #C9A227;
    --gold-light: #E8C547;
    --cream: #FDFBF6;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'DM Mono', Consolas, monospace;
}

/* ---------- Typography ---------- */
body.studio-shell-body { font-family: var(--font-body); }

.studio-brand-text,
.studio-page-title,
.studio-section-title,
h1, h2, h3 {
    font-family: var(--font-display) !important;
    letter-spacing: 0.2px;
}

code, pre, kbd, samp { font-family: var(--font-mono) !important; }

/* ---------- Top bar ---------- */
.studio-topbar { background: var(--navy); }

/* ---------- Brand ---------- */
.studio-brand-mark {
    background: linear-gradient(135deg, #0C1F3F 0%, #0A1733 100%) !important;
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.studio-brand-text { color: var(--navy); }
.studio-brand-subtext { color: var(--gold); letter-spacing: 1.5px; }

/* ---------- Hero -> navy with gold accents ---------- */
.studio-page-hero {
    background: linear-gradient(150deg, #0C1F3F 0%, #0A1733 60%, #081120 100%) !important;
}
.studio-eyebrow,
.studio-page-title em,
.studio-hero-stat-label { color: var(--gold-light) !important; }

.studio-page-title em { font-style: italic; }

/* ---------- Buttons ---------- */
.studio-btn-primary { background: var(--gold); color: var(--navy); border: none; }
.studio-btn-primary:hover { background: var(--gold-light); color: var(--navy); }

.studio-btn-white { background: #FFFFFF; color: var(--navy); }
.studio-btn-white:hover { background: #FFFDF7; color: var(--gold); }

.studio-btn-ghost { color: var(--gold); border-color: var(--gold); }
.studio-btn-ghost:hover { background: var(--gold); color: var(--navy); }

/* ---------- Trust strip / accents that used the old blue ---------- */
.studio-trust-item { color: var(--text-lt); }
.studio-nav-link.active::after,
.studio-nav-link:hover::after { background: var(--gold); }

/* ---------- No rounded corners anywhere (TRam house style) ---------- */
*, *::before, *::after { border-radius: 0 !important; }

/* ---------- Quick-action tiles (right side of hero) ---------- */
.studio-quick-tile {
    display: block;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
}
.studio-quick-tile:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: var(--gold);
    transform: translateX(3px);
}
.studio-quick-tile .studio-quick-title {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.studio-quick-tile .studio-quick-arrow { color: var(--gold-light); transition: transform .15s ease; }
.studio-quick-tile:hover .studio-quick-arrow { transform: translateX(4px); }
.studio-quick-tile .studio-quick-text { color: rgba(255,255,255,0.72); font-size: .9rem; line-height: 1.5; }