/* ============================================================
   BryFin Firefox Fixes
   - portfolio.css currently declares design tokens under `::root`
     which Firefox ignores, causing var(--*) to be unset.
   - also fixes focus selectors that were written as ::focus / ::focus-visible.
   ============================================================ */

:root {
    --bg-deep:       #11161d;
    --bg-mid:        #171e27;
    --bg-card:       #1c2430;
    --accent:        #134348;
    --accent-glow:   rgba(19, 67, 72, 0.35);
    --accent-hover:  #1b5b62;
    --green:         #27ae60;
    --green-glow:    rgba(39, 174, 96, 0.35);
    --amber:         #f5a623;
    --amber-soft:    rgba(245, 166, 35, 0.18);
    --link-blue:     #2f80ed;
    --text-1:        #f4f4f2;
    --text-2:        #c3c8d2;
    --text-3:        #8b94a5;
    --border:        rgba(129, 140, 153, 0.35);
    --border-hover:  rgba(232, 236, 241, 0.85);
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.2);
    --shadow-md:     0 4px 20px rgba(0,0,0,0.28);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.35);
    --radius:        12px;
    --transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:    'Playfair Display', Georgia, serif;
    --font-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* Typography scale */
    --text-h1:       clamp(2.25rem, 5vw, 2.75rem);
    --text-h2:       clamp(1.75rem, 4vw, 2rem);
    --text-h3:       clamp(1.15rem, 2vw, 1.35rem);
    --text-body:     clamp(1rem, 1.5vw, 1.125rem);
    --text-small:    0.875rem;
    --text-caption:  0.78rem;
    /* Spacing */
    --space-xs:      0.25rem;
    --space-sm:      0.5rem;
    --space-md:      1rem;
    --space-lg:      1.5rem;
    --space-xl:      2rem;
    --space-2xl:     3rem;
    --space-3xl:     4rem;
    --section-padding: 6rem;
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Ensure the hero "lined background" renders even if portfolio.css is partially ignored */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(245,166,35,0.16) 0%, transparent 55%),
                radial-gradient(circle at 90% 100%, rgba(39,174,96,0.14) 0%, transparent 60%),
                linear-gradient(145deg, #0a1218 0%, #11161d 55%, #0f141b 100%);
}

.hero-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(19,67,72,0.5) 0%, transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(245,166,35,0.35) 0%, transparent 50%);
}

/* Subtle grid pattern (the "lined background") */
.hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(139,148,165,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,148,165,0.15) 1px, transparent 1px);
    background-size: 60px 60px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-deep);
    color: var(--text-1);
    line-height: 1.65;
    overflow-x: hidden;
}