/* ============================================================
   Font faces
   ============================================================ */

@font-face {
    font-family: 'regular';
    src: url('../../assets/fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'condensed';
    src: url('../../assets/fonts/OpenSans-CondLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'condensedbold';
    src: url('../../assets/fonts/OpenSans-CondBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Design Tokens — Glassmorphism dark-first
   ============================================================ */

:root {
    /* Background */
    --bg-gradient:           #0a0f1e;
    --color-bg:              #0a0f1e;

    /* Glass surfaces */
    --color-glass:           rgba(255, 255, 255, 0.05);
    --color-glass-hover:     rgba(255, 255, 255, 0.09);
    --color-glass-border:    rgba(255, 255, 255, 0.12);

    /* Accent — emerald */
    --color-accent:          #34d399;
    --color-accent-glow:     rgba(52, 211, 153, 0.25);
    --color-accent-dim:      rgba(52, 211, 153, 0.5);

    /* Text */
    --color-text:            #e2e8f0;
    --color-text-muted:      #94a3b8;
    --color-text-nav:        #e2e8f0;

    /* Aliases expected by existing CSS */
    --color-surface:         var(--color-glass);
    --color-surface-raised:  rgba(255, 255, 255, 0.07);
    --color-border:          var(--color-glass-border);
    --color-border-strong:   rgba(255, 255, 255, 0.22);
    --color-border-btn:      rgba(255, 255, 255, 0.22);
    --color-shadow:          rgba(0, 0, 0, 0.55);
    --color-shadow-soft:     rgba(0, 0, 0, 0.30);
    --color-tile-overlay:    rgba(0, 0, 0, 0.70);
    --color-tile-text:       #fff;

    /* Blur */
    --blur-glass:            blur(14px);
    --blur-nav:              blur(20px);

    /* Shape */
    --radius-card:           1rem;
    --radius-btn:            0.5rem;
    --radius-sm:             0.375rem;
    --radius-indicator:      2px;   /* nav underline, small accents */
    --radius-divider:        1px;   /* social profile divider line */

    /* Typography */
    --font-regular:          'regular';
    --font-condensed:        'condensed';
    --font-condensed-bold:   'condensedbold';

    /* Nav background */
    --color-nav-bg:          rgba(10, 15, 30, 0.75);

    /* Layout */
    --max-width-article:     60em;
    --color-on-accent:       #000;

    /* Spacing scale */
    --space-xs:              0.25rem;
    --space-sm:              0.5rem;
    --space-md:              1rem;
    --space-lg:              1.5rem;
    --space-xl:              2rem;
    --space-2xl:             3rem;

    /* Font sizes */
    --font-size-sm:          0.875rem;
    --font-size-base:        1rem;
    --font-size-lg:          1.125rem;
    --font-size-xl:          1.25rem;

    /* Shadows */
    --shadow-card:           0 4px 24px var(--color-shadow-soft), 0 1px 4px var(--color-shadow);
    --shadow-card-hover:     0 12px 40px var(--color-shadow), 0 2px 8px var(--color-shadow);

    /* Accent subtle (for active nav bg, etc.) */
    --color-accent-subtle:   rgba(52, 211, 153, 0.08);

    /* Transitions */
    --transition-opacity:    opacity 0.75s ease-in-out;
    --transition-medium:     box-shadow 0.3s ease, border-color 0.3s ease;
    --transition-glow:       box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;

    /* Z-index scale */
    --z-nav:                 100; /* sticky nav / floating toggles */
    --z-tooltip:             200; /* tooltips rendered above nav   */
    --z-skip:               9999; /* skip-to-content link          */
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
    --bg-gradient:           #f0f9ff;
    --color-bg:              #f0f9ff;

    --color-glass:           rgba(255, 255, 255, 0.65);
    --color-glass-hover:     rgba(255, 255, 255, 0.85);
    --color-glass-border:    rgba(0, 0, 0, 0.09);

    --color-accent:          #059669;
    --color-accent-glow:     rgba(5, 150, 105, 0.18);
    --color-accent-dim:      rgba(5, 150, 105, 0.55);

    --color-text:            #0f172a;
    --color-text-muted:      #475569;
    --color-text-nav:        #0f172a;

    --color-surface:         rgba(255, 255, 255, 0.65);
    --color-surface-raised:  rgba(255, 255, 255, 0.5);
    --color-border:          rgba(0, 0, 0, 0.09);
    --color-border-strong:   rgba(0, 0, 0, 0.18);
    --color-border-btn:      rgba(0, 0, 0, 0.22);
    --color-shadow:          rgba(0, 0, 0, 0.12);
    --color-shadow-soft:     rgba(0, 0, 0, 0.07);
    --color-tile-overlay:    rgba(0, 0, 0, 0.60);
    --color-tile-text:       #fff;

    --color-nav-bg:          rgba(240, 249, 255, 0.80);
    --color-accent-subtle:   rgba(5, 150, 105, 0.08);
    --shadow-card:           0 4px 24px var(--color-shadow-soft), 0 1px 4px var(--color-shadow);
    --shadow-card-hover:     0 12px 40px var(--color-shadow), 0 2px 8px var(--color-shadow);
}