/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400;600;700&display=swap');

:root {
    /* Colors */
    --color-bg: #000000;
    --color-bg-secondary: #153914; /* From filter bg */
    --color-bg-card: #FFFFFF;
    --color-bg-faq: rgba(6, 82, 34, 0.25);
    
    --color-text-primary: #EDEDED;   /* rgb(0.929, 0.929, 0.929) */
    --color-text-secondary: #D4D4D4; /* rgb(0.831, 0.831, 0.831) */
    --color-text-muted: #CCCCCC;     /* rgb(0.8, 0.8, 0.8) */
    --color-text-placeholder: #848484; /* For price filter input */
    --color-text-dark: #272727;      /* rgb(0.153, 0.153, 0.153) */
    --color-text-darker: #000000;
    
    --color-accent-gold: #B18A55;    /* rgb(0.694, 0.541, 0.333) */
    --color-white: #FFFFFF;
    
    /* Variables from HTML template */
    --color-gold: #b18a55;
    --color-gold-hover: #956f3b;
    --color-text-main: #FFFFFF;
    --color-text-light: #ededed;
    --color-bg-main: #000000;
    --color-bg-card: rgba(0, 0, 0, 0.1);
    
    --container-width: 1292px;
    --section-spacing: 60px;
    
    --font-accent: 'Outfit', sans-serif;
    --font-main: 'Tektur', sans-serif;

    --color-border: #CFCFCF;         /* rgb(0.796, 0.796, 0.796) */

    /* Gradients */
    --gradient-gold: linear-gradient(90deg, #B18A55 0%, #E8D595 100%);
    --gradient-green: linear-gradient(90deg, #075225 0%, #15A24D 100%);

    /* Fonts */
    --font-primary: 'Tektur', sans-serif;
}

/* Basic */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; */ /* Disabled to avoid conflicts with custom JS scroll offset */
}

body {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
}

body.about-page {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71)),
        url('../assets/backgrounds/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.author-page {
    background-color: #FFFFFF;
}

body.portfolio-main-page,
body.portfolio-page {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71)),
        url('../assets/backgrounds/portfolio-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

img {
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}