/* =============================================
   glass.css — Site-wide Apple Liquid Glass theme
   Import LAST, after design-system.css + style.css.
   ============================================= */

/* --- Design tokens (glass override layer) --- */
:root {
    --sky-zenith:    #050d1a;
    --sky-deep:      #0a1828;
    --sky-mid:       #163352;
    --sky-horizon:   #7aacc8;
    --horizon-warm:  #c07848;

    /* Glass surfaces */
    --glass-xs:      rgba(255,255,255,0.05);
    --glass-sm:      rgba(255,255,255,0.08);
    --glass-md:      rgba(255,255,255,0.12);
    --glass-dark:    rgba(8,18,32,0.42);
    --glass-dark-hv: rgba(12,24,44,0.52);

    /* Glass borders */
    --border-glass:  rgba(255,255,255,0.16);
    --border-bright: rgba(255,255,255,0.48);
    --border-dim:    rgba(255,255,255,0.08);

    /* Gold accent */
    --gold:          #f0b040;
    --gold-glow:     rgba(240,176,64,0.30);
    --gold-dim:      rgba(240,176,64,0.14);
    --gold-border:   rgba(240,176,64,0.28);

    /* Override design-system accent to gold */
    --accent:        #f0b040;
    --accent-hover:  #f8c456;
    --accent-muted:  #b07820;
    --accent-dim:    rgba(240,176,64,0.14);
    --accent-glow:   rgba(240,176,64,0.28);

    /* Override design-system backgrounds */
    --bg-deep:       #080f1c;
    --bg-elevated:   rgba(10,20,36,0.72);
    --bg-card:       rgba(8,18,32,0.42);
    --bg-card-hover: rgba(12,24,44,0.52);
    --bg-input:      rgba(255,255,255,0.055);

    /* Override design-system text */
    --text-primary:   rgba(255,255,255,0.94);
    --text-secondary: rgba(255,255,255,0.62);
    --text-muted:     rgba(255,255,255,0.38);
    --text-inverse:   #070e18;

    /* Override design-system borders */
    --border-subtle: rgba(255,255,255,0.10);
    --border-light:  rgba(255,255,255,0.18);
    --border-accent: rgba(240,176,64,0.28);

    /* Override design-system shadows */
    --shadow-sm:     0 4px 16px rgba(0,0,0,0.25);
    --shadow-md:     0 8px 32px rgba(0,0,0,0.32);
    --shadow-lg:     0 20px 64px rgba(0,0,0,0.42);
    --shadow-accent: 0 0 24px rgba(240,176,64,0.30);

    /* Override design-system typography */
    --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-mono:  'DM Mono', 'SF Mono', Monaco, monospace;

    /* Shared glass radius */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
}

/* --- Body: sky gradient background --- */
html { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-sans);
    background: linear-gradient(
        175deg,
        var(--sky-zenith)   0%,
        var(--sky-deep)     25%,
        var(--sky-mid)      60%,
        var(--sky-horizon)  85%,
        var(--horizon-warm) 100%
    );
    background-attachment: fixed;
    color: var(--text-primary);
}

/* Suppress old grain overlay and dark fixed bg */
.grain-overlay { display: none; }
.page-wrapper::before { display: none; }
.page-wrapper { background: none; }

/* --- Glass Card primitive --- */
.glass-card,
.card,
.link-card,
.project-card,
.resource-card-shared {
    background: var(--glass-dark) !important;
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.glass-card::before,
.card::before,
.link-card::before,
.project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
    pointer-events: none;
    z-index: 1;
}

.glass-card:hover,
.card:hover,
.link-card:hover,
.project-card:hover {
    background: var(--glass-dark-hv) !important;
    border-color: rgba(255,255,255,0.22) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Featured / accent card variant */
.card-accent,
.card-featured {
    border-color: var(--gold-border) !important;
}

.card-accent::before,
.card-featured::before {
    background: linear-gradient(90deg, transparent, rgba(240,176,64,0.5), transparent);
}

/* Glass panel (heavier, for hero overlays / CTAs) */
.glass-panel {
    background: rgba(8,18,32,0.55);
    backdrop-filter: blur(32px) saturate(1.45);
    -webkit-backdrop-filter: blur(32px) saturate(1.45);
    border: 1px solid var(--border-glass);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-bright);
    position: relative;
    overflow: hidden;
}

.glass-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
    pointer-events: none;
}

/* --- Buttons --- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(150deg, rgba(248,186,72,0.95), rgba(210,140,30,0.92));
    border: 1px solid rgba(255,218,120,0.55);
    border-radius: var(--r-sm);
    color: #07100e;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.28s ease;
    box-shadow: 0 4px 24px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.50);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}

.btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44%;
    background: rgba(255,255,255,0.13);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    pointer-events: none;
}

.btn-gold:hover {
    background: linear-gradient(150deg, rgba(255,200,88,0.98), rgba(230,160,48,0.96));
    box-shadow: 0 8px 36px rgba(240,176,64,0.55), inset 0 1px 0 rgba(255,255,255,0.60);
    transform: translateY(-2px);
    color: #07100e;
}

.btn-gold svg { transition: transform 0.22s ease; }
.btn-gold:hover svg { transform: translateX(3px); }

.btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--glass-sm);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.28s ease;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.20);
}

.btn-glass:hover {
    background: var(--glass-md);
    border-color: rgba(255,255,255,0.30);
    transform: translateY(-2px);
    color: var(--text-primary);
}

/* Map design-system btn classes to glass styles */
.btn-primary {
    background: linear-gradient(150deg, rgba(248,186,72,0.95), rgba(210,140,30,0.92)) !important;
    border-color: rgba(255,218,120,0.55) !important;
    color: #07100e !important;
    box-shadow: 0 4px 24px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

.btn-primary:hover {
    background: linear-gradient(150deg, rgba(255,200,88,0.98), rgba(230,160,48,0.96)) !important;
    box-shadow: 0 8px 36px rgba(240,176,64,0.55), inset 0 1px 0 rgba(255,255,255,0.60) !important;
    transform: translateY(-2px) !important;
    color: #07100e !important;
}

.btn-secondary {
    background: var(--glass-sm) !important;
    backdrop-filter: blur(16px);
    border-color: var(--border-glass) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background: var(--glass-md) !important;
    border-color: rgba(255,255,255,0.30) !important;
}

/* --- Section text hierarchy --- */
.section-label {
    color: var(--gold) !important;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--font-serif);
    color: var(--text-primary);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    letter-spacing: -0.025em;
    font-weight: 400;
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}

/* --- Card icon box --- */
.card-icon,
.icon-box {
    background: var(--gold-dim) !important;
    border: 1px solid var(--gold-border) !important;
    box-shadow: 0 0 20px var(--gold-glow);
}

.card-icon svg,
.icon-box svg {
    stroke: var(--gold) !important;
}

/* --- Form inputs (glass) --- */
.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
    background: var(--bg-input) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-primary) !important;
    border-radius: var(--r-sm);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: rgba(240,176,64,0.55) !important;
    box-shadow: 0 0 0 3px var(--gold-dim) !important;
    background: rgba(255,255,255,0.085) !important;
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

.form-submit,
button[type="submit"] {
    background: linear-gradient(150deg, rgba(248,186,72,0.93), rgba(210,140,30,0.90)) !important;
    border: 1px solid rgba(255,218,120,0.50) !important;
    color: #07100e !important;
    font-weight: 700;
    border-radius: var(--r-sm);
    box-shadow: 0 4px 20px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.42) !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

.form-submit:hover,
button[type="submit"]:hover {
    box-shadow: 0 8px 32px rgba(240,176,64,0.52), inset 0 1px 0 rgba(255,255,255,0.52) !important;
    transform: translateY(-1px);
}

/* --- Badge / tag overrides --- */
.badge {
    background: var(--gold-dim);
    color: var(--gold);
    border: 1px solid var(--gold-border);
}

.tag {
    background: var(--glass-xs);
    border: 1px solid var(--border-dim);
    color: var(--text-muted);
}

/* --- Metrics strip --- */
.metrics-strip {
    background: var(--glass-dark) !important;
    backdrop-filter: blur(22px);
    border-color: var(--border-glass) !important;
}

/* --- Code blocks --- */
.code-block pre,
pre {
    background: rgba(5,12,24,0.7) !important;
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(8px);
}

code {
    background: rgba(240,176,64,0.12);
    color: var(--gold);
    border-radius: 4px;
    padding: 2px 6px;
}

/* --- Divider accent --- */
.divider-accent {
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

/* --- CTA box (design-system) → glass panel --- */
.cta-box {
    background: rgba(8,18,32,0.55) !important;
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-bright);
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
    pointer-events: none;
}

/* --- Scrollbar (glass-themed) --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* --- Responsive touch-up --- */
@media (max-width: 768px) {
    body { background-attachment: scroll; }
}