@import url('./components/forms.css');
@import url('./components/response.css');
@import url('./components/buttons.css');
@import url('./components/breadcrumbs.css');
@import url('./pages/dashboard.css');
@import url('./pages/orders.css');
@import url('./pages/orders-add.css');

/*
======================================================================
Variables
======================================================================
*/
:root {
    /* ===== Color: Background ===== */
    --bg: #0b0f14;
    --bgElev: #111826;
    --bgHover: #0f1623;

    /* ===== Color: Text ===== */
    --text: #e6eefc;
    --muted: #9db0c9;

    /* ===== Color: Brand / State ===== */
    --primary: #5aa9ff;
    --primaryHover: #8bc2ff;
    --accent: #00e3a2;
    --danger: #ff647c;

    /* ===== Color: Border / Focus ===== */
    --border: #1c2940;
    --focus: 0 0 0 3px rgba(90, 169, 255, .35);

    /* ===== Layout / UI ===== */
    --radius: 0.625rem  /* 10/16 */;
    --radiusSm: 0.5rem  /* 8/16 */;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);

    /* ===== Spacing ===== */
    --container: 1180px;
    --gap: 22px;
    --gapSm: 12px;
    --gapLg: 32px;

    /* ===== Motion ===== */
    --trans: .2s ease;
}

/*
======================================================================
Reset / Base / A11y
======================================================================
*/
* { box-sizing: border-box }
html, body { height: 100% }
html { scroll-behavior: smooth }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block }
a { color: var(--primary); text-decoration: none }
a:hover { color: var(--primaryHover) }
button, input, select, textarea { font: inherit; color: inherit }
::selection { background: #10325a; color: #eaf3ff }