/* ==========================================================================
   ZAPPYWIN - THEME TOKENS & CORE VARIABLES (Figma Mobile Fidelity)
   ========================================================================== */

:root {
    /* Brand Dark Surfaces (Obsidian Slate) */
    --zw-bg-body: #07090e;
    --zw-bg-surface-1: #0e121a;
    --zw-bg-surface-2: #141923;
    --zw-bg-surface-card: #121622;
    --zw-bg-surface-hover: #1b2130;
    
    /* Borders */
    --zw-border-subtle: #1c2333;
    --zw-border-gold: #ffc80040;
    --zw-border-focus: #ffc800;

    /* Brand Primary Accent (Radiant Gold / Yellow) */
    --zw-accent: #ffc800;
    --zw-accent-hover: #e6b400;
    --zw-accent-glow: rgba(255, 200, 0, 0.35);
    --zw-accent-dark: #221c08;

    /* Secondary Status Accents */
    --zw-success: #00e676;
    --zw-success-glow: rgba(0, 230, 118, 0.3);
    --zw-danger: #ff334b;
    --zw-warning: #ff9100;
    --zw-info: #00b0ff;

    /* Typography Colors */
    --zw-text-white: #ffffff;
    --zw-text-primary: #f0f2f5;
    --zw-text-secondary: #8e9bb0;
    --zw-text-muted: #647087;
    --zw-text-gold: #ffc800;

    /* Fonts */
    --zw-font-main: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Transitions & Radii */
    --zw-radius-sm: 8px;
    --zw-radius-md: 12px;
    --zw-radius-lg: 16px;
    --zw-radius-pill: 50px;
    --zw-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Global Styles */
* {
    box-sizing: border-box;
}

body.zappy-body {
    background-color: var(--zw-bg-body);
    color: var(--zw-text-primary);
    font-family: var(--zw-font-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--zw-bg-body);
}
::-webkit-scrollbar-thumb {
    background: var(--zw-border-subtle);
    border-radius: var(--zw-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--zw-accent);
}

/* Utilities */
.text-accent { color: var(--zw-accent) !important; }
.text-success-neon { color: var(--zw-success) !important; }
.bg-surface-card { background-color: var(--zw-bg-surface-card) !important; }
.border-subtle { border-color: var(--zw-border-subtle) !important; }

/* Custom Glows */
.glow-accent {
    box-shadow: 0 0 20px var(--zw-accent-glow);
}
.glow-success {
    box-shadow: 0 0 15px var(--zw-success-glow);
}

/* Slanted / Skewed Badge Mixin */
.skewed-badge {
    transform: skew(-10deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.skewed-badge > * {
    transform: skew(10deg);
}