@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════════
   DEFAULTS — dark-red (Nothing aesthetic)
══════════════════════════════════════════════ */
:root {
    --bg:         #0A0A0A;
    --surface:    #141414;
    --surface-2:  #1C1C1C;
    --surface-3:  #252525;

    --ink:        #F2F2F2;
    --ink-2:      rgba(242,242,242,0.52);
    --ink-3:      rgba(242,242,242,0.28);

    --line:        rgba(255,255,255,0.07);
    --line-strong: rgba(255,255,255,0.13);

    --accent:        #FF3B30;
    --accent-2:      #FF6961;
    --accent-dim:    rgba(255,59,48,0.12);
    --accent-shadow: rgba(255,59,48,0.30);

    --danger:   #FF453A;
    --success:  #32D74B;
    --warning:  #FF9F0A;

    --radius:    10px;
    --radius-sm:  6px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.55);

    --font:      "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

    --nav-bg:        rgba(10,10,10,0.97);
    --topbar-bg:     rgba(14,14,14,0.90);
    --modal-overlay: rgba(0,0,0,0.65);

    --input-bg:       var(--surface-2);
    --input-bg-focus: var(--surface-3);
}

/* Auto light fallback (when no data-theme is set) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg:         #F5F5F7;
        --surface:    #FFFFFF;
        --surface-2:  #F0F0F2;
        --surface-3:  #E8E8EC;

        --ink:        #1C1C1E;
        --ink-2:      rgba(28,28,30,0.54);
        --ink-3:      rgba(28,28,30,0.32);

        --line:        rgba(0,0,0,0.08);
        --line-strong: rgba(0,0,0,0.14);

        --accent:        #E0282A;
        --accent-2:      #FF3B30;
        --accent-dim:    rgba(224,40,42,0.10);
        --accent-shadow: rgba(224,40,42,0.24);

        --danger:   #DC2626;
        --success:  #059669;
        --warning:  #D97706;

        --shadow:    0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07);
        --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);

        --nav-bg:        rgba(255,255,255,0.97);
        --topbar-bg:     rgba(250,250,252,0.93);
        --modal-overlay: rgba(0,0,0,0.35);

        --input-bg:       #F0F0F2;
        --input-bg-focus: #FFFFFF;
    }
}