/* main.css - Core CSS Variables, Typography & Reset */

/* ============================================================
   SELF-HOSTED WEBFONTS — guarantee styled glyphs render on EVERY device
   (zero dependency on installed fonts). Scoped via unicode-range so they
   load/apply ONLY for the styled ranges; normal Latin text stays Inter.
   STIX Two Math (SIL OFL): Mathematical Alphanumeric Symbols + Letterlike + operators.
   Noto Sans Symbols 2 (SIL OFL): enclosed, squared, dingbats, arrows, braille, geometric.
   ============================================================ */
@font-face {
    font-family: 'CFMath';
    src: url('/assets/fonts/STIX2Math.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+1D400-1D7FF, U+2100-214F, U+2200-22FF, U+2300-23FF, U+27C0-27EF, U+2980-29FF, U+2A00-2AFF;
}
@font-face {
    font-family: 'CFSymbols';
    src: url('/assets/fonts/NotoSansSymbols2-Regular.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+2460-24FF, U+2500-259F, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+2800-28FF, U+2B00-2BFF, U+1F000-1F0FF, U+1F100-1F1FF;
}

/* Inter (self-hosted variable font) — replaces the render-blocking Google Fonts
   <link> + the 3rd-party request (also removes the privacy leak). One file per
   subset covers all weights (100-900); unicode-range keeps latin-ext lazy. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   0. CSS RESET & CUSTOM PROPERTIES
   ============================================================ */

:root {
    --c-bg: #06060f;
    --c-surface: rgba(18, 18, 32, 0.65);
    --c-surface-solid: #12121f;
    --c-surface-hover: rgba(35, 35, 55, 0.7);
    --c-border: rgba(255, 255, 255, 0.06);
    --c-border-hover: rgba(255, 255, 255, 0.12);
    --c-text: #f0f0f5;
    --c-text-secondary: #8888a0;
    --c-text-muted: #7a7a94;
    --c-pink: #ff2d78;
    --c-purple: #a855f7;
    --c-cyan: #06d6a0;
    --c-success: var(--c-cyan); /* on-brand success/confirmation green (replaces the old ad-hoc green) */
    --grad-brand: linear-gradient(135deg, #d61f63, #9333ea); /* darker stops so white button text meets WCAG AA 4.5:1; bright --c-pink/--c-purple stay for accent text */
    --grad-glow: linear-gradient(135deg, var(--c-pink), var(--c-purple), var(--c-cyan));
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-full: 999px;
    --s-xs: 0.25rem;
    --s-sm: 0.5rem;
    --s-md: 1rem;
    --s-lg: 1.5rem;
    --s-xl: 2rem;
    --s-2xl: 3rem;
    --s-3xl: 4rem;
    --t-fast: 0.15s ease;
    --t-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Inter for normal text; the trailing fonts are per-glyph fallbacks that
       cover the Mathematical Alphanumeric / symbol ranges (Script, Fraktur,
       Double-Struck, etc.) so styled text never renders as tofu boxes.
       Browsers fall back per-glyph, so normal Latin text still uses Inter. */
    --font: 'Inter', 'CFMath', 'CFSymbols', system-ui, -apple-system, 'Cambria Math', 'STIX Two Math', 'Segoe UI Symbol', 'Segoe UI Historic', 'Apple Symbols', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font);
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    color: var(--c-text);
    background-color: var(--c-bg);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    line-height: 1.6;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 45, 120, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(6, 214, 160, 0.06), transparent),
        var(--c-bg);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: var(--c-pink);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--c-purple);
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */

html.light-mode {
    --c-bg: #F8FAFC;
    --c-surface: rgba(255, 255, 255, 0.75);
    --c-surface-solid: #ffffff;
    --c-surface-hover: rgba(0, 0, 0, 0.04);
    --c-border: rgba(0, 0, 0, 0.08);
    --c-border-hover: rgba(0, 0, 0, 0.15);
    --c-text: #1e293b;
    --c-text-secondary: #475569;
    --c-text-muted: #64748b;
    --c-pink: #e11d6d;
    --c-purple: #9333ea;
    --c-cyan: #059669;
}

html.light-mode body {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 45, 120, 0.04), transparent),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(6, 214, 160, 0.04), transparent),
        var(--c-bg);
}

html.light-mode .header {
    background: rgba(248, 250, 252, 0.75);
}

html.light-mode .nav-mobile {
    background: rgba(248, 250, 252, 0.98);
}

html.light-mode .input-card__toolbar {
    background: rgba(241, 245, 249, 0.95);
}

html.light-mode .input-card__textarea {
    background: #fff;
}

html.light-mode .font-card {
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.light-mode .font-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 15px rgba(168, 85, 247, 0.06);
}

html.light-mode .font-card::before {
    background: linear-gradient(135deg, rgba(255, 45, 120, 0.02), rgba(168, 85, 247, 0.02));
}

html.light-mode .footer {
    background: rgba(241, 245, 249, 0.8);
}

html.light-mode .toast {
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

html.light-mode .nickname-input,
html.light-mode .nickname-select,
html.light-mode .bio-textarea,
html.light-mode .bio-font-select {
    background: #fff;
}

html.light-mode .tool-panel {
    background: rgba(255, 255, 255, 0.6);
}

html.light-mode .nav__dropdown-menu {
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}