@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap');
@import 'tailwindcss';
@import '../styles/fonts.css';

:root {
    --forge-orange: #f18424;
    --charcoal-black: #0d0d0d;
    --iron-gray: #2e2e2e;
    --ash-gray: #a2a2a2;
    --coal-shadow: #1a1a1a;
    --spark-yellow: #ffce5b;
    --molten-red: #d9481f;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--charcoal-black);
    font-family: 'Satoshi', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

.font-machina {
    font-family: 'PP Neue Machina Inktrap', sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--coal-shadow);
}

::-webkit-scrollbar-thumb {
    background: var(--iron-gray);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--forge-orange);
}

/* Selection */
::selection {
    background-color: var(--forge-orange);
    color: var(--charcoal-black);
}
