/* ==========================================================================
   Design Tokens — Liquid Glass System
   ========================================================================== */

/* ---- Inter Variable Font ---- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

:root {
    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.8125rem;  /* 13px */
    --fs-base: 0.9375rem;  /* 15px */
    --fs-md:   1rem;       /* 16px */
    --fs-lg:   1.125rem;   /* 18px */
    --fs-xl:   1.25rem;    /* 20px */
    --fs-2xl:  1.5rem;     /* 24px */
    --fs-3xl:  1.875rem;   /* 30px */
    --fs-4xl:  2.25rem;    /* 36px */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* ---- Surface Colors (dark base) ---- */
    --color-bg:       hsl(220, 15%, 8%);     /* #12141a */
    --color-surface:  hsl(220, 14%, 11%);    /* #181b22 */
    --color-elevated: hsl(220, 13%, 14%);    /* #1e2129 */
    --color-border:   hsl(220, 12%, 20%);    /* #2d3140 */
    --color-border-subtle: hsl(220, 10%, 16%);

    /* ---- Glass Effects ---- */
    --glass-bg:       rgba(24, 27, 34, 0.65);
    --glass-bg-hover: rgba(30, 33, 41, 0.75);
    --glass-blur:     16px;
    --glass-border:   1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow:   0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);

    /* ---- Accent Colors ---- */
    --color-accent:       hsl(200, 100%, 50%);  /* Cyan #00aaff */
    --color-accent-hover: hsl(200, 100%, 60%);
    --color-accent-muted: hsl(200, 50%, 40%);

    /* ---- Text Hierarchy ---- */
    --color-text:         hsl(220, 15%, 90%);   /* #e2e4ea */
    --color-text-muted:   hsl(220, 10%, 55%);   /* #848892 */
    --color-text-subtle:  hsl(220, 8%, 40%);
    --color-text-inverse: hsl(220, 15%, 8%);

    /* ---- Semantic Colors ---- */
    --color-success: hsl(142, 71%, 45%);   /* #2ea043 */
    --color-warning: hsl(39, 100%, 50%);   /* #ff9f00 */
    --color-danger:  hsl(0, 72%, 51%);     /* #d72638 */
    --color-info:    hsl(200, 100%, 50%);  /* cyan */

    /* ---- Engine Badge Colors ---- */
    --engine-renpy:   hsl(142, 71%, 45%);  /* green */
    --engine-rpgm:    hsl(217, 91%, 60%);  /* blue */
    --engine-unity:   hsl(0, 72%, 51%);    /* red */
    --engine-unreal:  hsl(200, 100%, 50%); /* cyan */
    --engine-html:    hsl(39, 100%, 50%);  /* yellow */
    --engine-other:   hsl(220, 10%, 55%);  /* muted */

    /* ---- Spacing Scale ---- */
    --sp-1:  0.25rem;  /* 4px */
    --sp-2:  0.5rem;   /* 8px */
    --sp-3:  0.75rem;  /* 12px */
    --sp-4:  1rem;     /* 16px */
    --sp-5:  1.25rem;  /* 20px */
    --sp-6:  1.5rem;   /* 24px */
    --sp-8:  2rem;     /* 32px */
    --sp-10: 2.5rem;   /* 40px */
    --sp-12: 3rem;     /* 48px */
    --sp-16: 4rem;     /* 64px */

    /* ---- Radius ---- */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ---- Shadows (non-glass) ---- */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.4);

    /* ---- Transitions ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ---- Z-Index Layers ---- */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-popover:  600;
    --z-toast:    700;

    /* ---- Layout ---- */
    --container-max: 1600px;
    --sidebar-width: 300px;
    --header-height: 60px;
    --admin-bar-offset: 0px;
}

/* Admin bar offset when logged in. */
.admin-bar {
    --admin-bar-offset: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar {
        --admin-bar-offset: 46px;
    }
}