/* ==========================================================
   ThunderPixels v2
   Base Styles
   ========================================================== */


/* ===========================
   CSS VARIABLES
=========================== */

:root {

    /* Colors */

    --color-primary: #F5C242;
    --color-primary-dark: #D9A820;

    --color-background: #0B0B0D;
    --color-surface: #151518;
    --color-surface-light: #1D1D22;

    --color-text: #FFFFFF;
    --color-text-light: #B8B8BE;

    --color-border: #2B2B31;

    --color-success: #22C55E;
    --color-danger: #EF4444;

    /* Typography */

    --font-primary: "Inter", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 3rem;
    --font-size-3xl: 4rem;

    /* Font Weight */

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

    /* Spacing */

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    --space-4xl: 7rem;

    /* Radius */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Container */

    --container-width: 1200px;

    /* Shadows */

    --shadow-sm: 0 4px 20px rgba(0,0,0,.15);
    --shadow-md: 0 10px 35px rgba(0,0,0,.25);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);

    /* Transition */

    --transition: 0.3s ease;

}


/* ===========================
   RESET
=========================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


/* ===========================
   HTML
=========================== */

html {

    scroll-behavior: smooth;

}


/* ===========================
   BODY
=========================== */

body {

    font-family: var(--font-primary);

    background: var(--color-background);

    color: var(--color-text);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

}


/* ===========================
   IMAGES
=========================== */

img {

    display: block;

    max-width: 100%;

}


/* ===========================
   LINKS
=========================== */

a {

    text-decoration: none;

    color: inherit;

}


/* ===========================
   LISTS
=========================== */

ul,
ol {

    list-style: none;

}


/* ===========================
   BUTTONS
=========================== */

button {

    font: inherit;

    border: none;

    outline: none;

    cursor: pointer;

    background: transparent;

}


/* ===========================
   INPUTS
=========================== */

input,
textarea,
select {

    font: inherit;

    outline: none;

}


/* ===========================
   HEADINGS
=========================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: var(--fw-bold);

    line-height: 1.2;

}


/* ===========================
   PARAGRAPHS
=========================== */

p {

    color: var(--color-text-light);

}


/* ===========================
   SECTIONS
=========================== */

section {

    padding: 100px 0;

}


/* ===========================
   CONTAINER
=========================== */

.container {

    width: min(90%, var(--container-width));

    margin-inline: auto;

}


/* ===========================
   UTILITIES
=========================== */

.text-center {

    text-align: center;

}

.hidden {

    display: none;

}