/* ==========================================================================
   Theme – CSS Custom Properties & Base Reset
   Dark trading dashboard theme inspired by GitHub dark mode
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Design tokens ---------- */
:root {
    /* Backgrounds */
    --bg-primary:   #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary:  #1c2333;
    --bg-hover:     #21262d;
    --bg-overlay:   rgba(0, 0, 0, 0.55);
    --bg-glass:     rgba(22, 27, 34, 0.72);

    /* Borders */
    --border:       #30363d;
    --border-light: #21262d;
    --border-glass: rgba(48, 54, 61, 0.55);

    /* Text */
    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --text-tertiary:  #6e7681;
    --text-link:      #58a6ff;

    /* Accents */
    --accent:       #58a6ff;
    --accent-hover: #79c0ff;
    --accent-muted: rgba(88, 166, 255, 0.15);

    /* Semantic */
    --success:       #3fb950;
    --success-muted: rgba(63, 185, 80, 0.15);
    --danger:        #f85149;
    --danger-muted:  rgba(248, 81, 73, 0.15);
    --warning:       #d29922;
    --warning-muted: rgba(210, 153, 34, 0.15);
    --info:          #58a6ff;
    --info-muted:    rgba(88, 166, 255, 0.15);

    /* Typography */
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --fs-xs:   0.8125rem;  /* 13px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.375rem;   /* 22px */
    --fs-xl:   1.625rem;   /* 26px */
    --fs-2xl:  2.125rem;   /* 34px */

    /* Spacing (8px grid) */
    --sp-2:  2px;
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;

    /* Shape */
    --radius:    8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* Depth */
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration: 0.15s;

    /* Layout */
    --nav-height: 56px;
    --sidebar-width: 260px;
}

/* ---------- Global reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-primary);
}

/* ---------- Selection ---------- */
::selection {
    background-color: var(--accent-muted);
    color: var(--accent-hover);
}

::-moz-selection {
    background-color: var(--accent-muted);
    color: var(--accent-hover);
}

/* ---------- Base element defaults ---------- */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

a:hover {
    color: var(--accent-hover);
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

code,
pre,
kbd {
    font-family: var(--mono);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--sp-16) 0;
}