@import url('/assets/css/google-sans.css');

:root {
    /* ── Colors ── */
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --accent-blue: #4285F4;
    --accent-green: #34A853;
    --accent-red: #EA4335;

    /* ── Typography ── */
    --font-main: 'Google Sans', sans-serif;

    /* ── Surfaces ── */
    --nav-bg: transparent;
    --nav-border: rgba(255, 255, 255, 0.05);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --footer-border: rgba(255, 255, 255, 0.05);
    --dropdown-bg: rgba(0, 0, 0, 0.7);
    --dropdown-border: rgba(255, 255, 255, 0.12);
    --border-outline: rgba(255, 255, 255, 0.08);

    /* ── Inputs ── */
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus-bg: rgba(255, 255, 255, 0.1);
    --input-color: #ffffff;

    /* ── Buttons ── */
    --btn-bg: #ffffff;
    --btn-color: #191919;
    --btn-hover-bg: #f1f1f1;
    --btn-shadow: rgba(255, 255, 255, 0.1);

    /* ── Gradients ── */
    --massive-gradient: #fff;
    --hero-gradient: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
    --link-hover: #fff;
    --orb-color: rgba(66, 133, 244, 0.3);
    --ambient-1: rgba(66, 133, 244, 0.15);
    --ambient-2: rgba(234, 67, 53, 0.05);
    --ambient-3: rgba(52, 168, 83, 0.05);

    /* ── Radius Scale ── */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 100px;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;

    /* ── Shadows (dark) ── */
    --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-elevated: 0 10px 40px rgba(0, 0, 0, 0.45);

    /* ── Glass ── */
    --glass-blur: blur(6px);
    --glass-blur-webkit: blur(14px);
}

@media (prefers-color-scheme: light) {
    :root {
        /* ── Colors ── */
        --bg-color: #ffffff;
        --text-primary: #111111;
        --text-secondary: rgba(0, 0, 0, 0.5);

        /* ── Surfaces ── */
        --nav-bg: rgba(255, 255, 255, 0.75);
        --nav-border: rgba(0, 0, 0, 0.07);
        --card-bg: rgba(0, 0, 0, 0.02);
        --card-border: rgba(0, 0, 0, 0.08);
        --footer-border: rgba(0, 0, 0, 0.07);
        --dropdown-bg: rgba(255, 255, 255, 0.85);
        --dropdown-border: rgba(0, 0, 0, 0.1);
        --border-outline: rgba(7, 7, 7, 0.308);

        /* ── Inputs ── */
        --input-bg: rgba(0, 0, 0, 0.04);
        --input-border: rgba(0, 0, 0, 0.12);
        --input-focus-bg: rgba(0, 0, 0, 0.07);
        --input-color: #111111;

        /* ── Buttons ── */
        --btn-bg: #111111;
        --btn-color: #ffffff;
        --btn-hover-bg: #2a2a2a;
        --btn-shadow: rgba(0, 0, 0, 0.15);

        /* ── Gradients ── */
        --massive-gradient: #000;
        --hero-gradient: linear-gradient(180deg, #111111 0%, rgba(17, 17, 17, 0.5) 100%);
        --link-hover: #111111;
        --orb-color: rgba(66, 133, 244, 0.12);
        --ambient-1: rgba(66, 133, 244, 0.08);
        --ambient-2: rgba(234, 67, 53, 0.04);
        --ambient-3: rgba(52, 168, 83, 0.04);

        /* ── Shadows (light) ── */
        --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        --shadow-elevated: 0 10px 40px rgba(0, 0, 0, 0.15);
    }
}