/* ============================================
   QuickBite POS - Design Tokens
   All colors, spacing, typography scales
   ============================================ */

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DM_Sans,Space_Grotesk/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

:root {
    /* ---- Core Palette ---- */
    --bg-primary:      #090B13;
    --bg-secondary:    #10131F;
    --bg-tertiary:     #171B2A;
    --bg-elevated:     #21283A;
    --bg-hover:        rgba(255, 255, 255, 0.055);

    /* ---- Accent ---- */
    --accent:          #FF6B3D;
    --accent-hover:    #FF835E;
    --accent-subtle:   rgba(255, 107, 61, 0.12);
    --accent-glow:     rgba(255, 107, 61, 0.24);

    /* ---- Gold ---- */
    --gold:            #FFC107;
    --gold-subtle:     rgba(255, 193, 7, 0.12);

    /* ---- Semantic Colors ---- */
    --success:         #37C978;
    --success-subtle:  rgba(55, 201, 120, 0.12);
    --danger:          #F44336;
    --danger-subtle:   rgba(244, 67, 54, 0.12);
    --warning:         #FFA726;
    --warning-subtle:  rgba(255, 167, 38, 0.12);
    --info:            #29B6F6;
    --info-subtle:     rgba(41, 182, 246, 0.12);

    /* ---- Text ---- */
    --text-primary:    #F5F7FC;
    --text-secondary:  #9AA3B8;
    --text-muted:      #5E687F;
    --text-on-accent:  #FFFFFF;

    /* ---- Border ---- */
    --border:          #272D3E;
    --border-hover:    #3A4257;
    --border-focus:    var(--accent);

    /* ---- Typography ---- */
    --font-heading:    'Space Grotesk', system-ui, sans-serif;
    --font-body:       'DM Sans', system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs:   0.6875rem;   /* 11px */
    --fs-sm:   0.75rem;     /* 12px */
    --fs-base: 0.875rem;    /* 14px */
    --fs-md:   1rem;        /* 16px */
    --fs-lg:   1.125rem;    /* 18px */
    --fs-xl:   1.25rem;     /* 20px */
    --fs-2xl:  1.5rem;      /* 24px */
    --fs-3xl:  1.75rem;     /* 28px */

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

    --lh-tight:    1.25;
    --lh-normal:   1.5;
    --lh-relaxed:  1.75;

    /* ---- 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 */

    /* ---- Radius ---- */
    --radius-sm:   4px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* ---- Transitions ---- */
    --transition-fast:   120ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   350ms ease;

    /* ---- Z-Index Scale ---- */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal-bg:  900;
    --z-modal:     1000;
    --z-toast:     2000;
    --z-tooltip:   3000;

    /* ---- Layout ---- */
    --sidebar-width:     76px;
    --sidebar-expanded:  272px;
    --topbar-height:     72px;
    --pos-cat-width:     176px;
    --pos-cart-width:    380px;
}