@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');
@import url('../styles/font.css');

:root {
    --brand-color-surface-alt: #36322f;
    --brand-color-warm: #f9c59c;
    --brand-color-warm-lightest: #fef9f5;
    --color-scheme-1--text: var(--color-scheme-2--text);
    --color-scheme-1--background: var(--color-scheme-2--background);
    --color-scheme-1--foreground: var(--color-scheme-2--foreground);
    --color-scheme-1--border: var(--color-scheme-2--border);
    --color-scheme-1--accent: var(--color-scheme-2--accent);
    --color-scheme-1--secondary: var(--color-scheme-2--secondary);
}

:root {
    --color-scheme-1--background: var(--_primitives---colors--secondary-lightest);
    --_typography---font-styles--body: "DM Sans";
    --_typography---font-styles--heading: 'Argent CF', sans-serif;
    --heading-font-size: 32px;
    --color-scheme-1--text: var(--_primitives---colors--neutral-darker);
    --_primitives---colors--white: #fff;
    --color-scheme-1--border: var(--_primitives---colors--neutral-lighter);
    --_primitives---opacity--transparent: transparent;
    --_primitives---opacity--neutral-darkest-15: #00000026;
    --color-scheme-1--accent: var(--color-scheme-2--accent);
    --_primitives---colors--neutral-darkest: #000;
    --_primitives---colors--neutral-darker: #191919;
    --_primitives---opacity--white-20: #fff3;
    --_primitives---colors--surface: #443f3b;
    --input-border-color: #443f3b;
    --_primitives---colors--surface-dark: var(--brand-color-surface-alt);
    --_primitives---colors--primary: #a6d5c5;
    --_ui-styles---stroke--border-width: 1px;
    --_primitives---opacity--neutral-darkest-5: #0000000d;
    --_primitives---opacity--white-10: #ffffff1a;
    --_primitives---colors--neutral-lighter: #d8d8d8;
    --_primitives---colors--primary-dark: #84aa9d;
    --color-scheme-1--foreground: var(--_primitives---colors--neutral-lightest);
    --color-scheme-3--secondary: var(--_primitives---colors--surface-light);
    --_primitives---opacity--white-60: #fff9;
    --_ui-styles---radius--medium: 12px;
    --color-scheme-1--secondary: var(--_primitives---colors--neutral-dark);
    --background-color--background-secondary: var(--base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>);
    --border-color--border-primary: var(--base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>);
    --_ui-styles---radius--small: 6px;
    --_primitives---colors--primary-light: #c0e1d6;
    --_primitives---colors--primary-darker: #42554e;
    --_ui-styles---radius--large: 16px;
    --_ui-styles---radius--pill: 999px;
    --_ui-styles---stroke--divider-width: 1px;
    --_primitives---colors--transparent: transparent;
    --home-accent-glow: transparent;
    --home-bg-image: url('../../pictures/home/home-page-background-image.png');
    --home-bg-overlay: rgba(0, 0, 0, 0.80);
    --color-scheme-2--background: var(--_primitives---colors--surface);
    --color-scheme-2--text: var(--_primitives---colors--white);
    --color-scheme-3--background: var(--_primitives---colors--surface-darkest);
    --color-scheme-3--text: var(--_primitives---colors--neutral-lighter);
    --_primitives---colors--primary-darkest: #313f3b;
    --_primitives---colors--surface-darker: #1b1917;
    --color-scheme-3--border: var(--_primitives---colors--surface-light);
    --_primitives---opacity--neutral-darkest-20: #0003;
    --_primitives---opacity--neutral-darkest-10: #0000001a;
    --_primitives---colors--neutral-lightest: #f2f2f2;
    --color-scheme-2--accent: var(--_primitives---colors--primary);
    --_primitives---colors--secondary-lighter: #fdf3eb;
    --_primitives---colors--secondary-lightest: var(--brand-color-warm-lightest);
    --base-color-neutral--white: white;
    --color-scheme-3--foreground: var(--_primitives---colors--surface-darker);
    --color-scheme-2--foreground: var(--_primitives---colors--surface);
    --_primitives---colors--surface-darkest: #141211;
    --_primitives---colors--neutral-light: #b2b2b2;
    --_primitives---colors--neutral: #7f7f7f;
    --_primitives---colors--neutral-dark: #4c4c4c;
    --_primitives---opacity--white-5: #ffffff0d;
    --_primitives---opacity--white-15: #ffffff26;
    --_primitives---opacity--white-30: #ffffff4d;
    --_primitives---opacity--white-40: #fff6;
    --_primitives---opacity--white-50: #ffffff80;
    --_primitives---opacity--neutral-darkest-30: #0000004d;
    --_primitives---opacity--neutral-darkest-40: #0006;
    --_primitives---opacity--neutral-darkest-50: #00000080;
    --_primitives---opacity--neutral-darkest-60: #0009;
    --color-scheme-2--border: var(--_primitives---colors--neutral-lightest);
    --color-scheme-2--secondary: var(--_primitives---colors--surface-lighter);
    --color-scheme-3--accent: var(--_primitives---colors--secondary);
    --_primitives---colors--surface-lightest: #ecebeb;
    --_primitives---colors--surface-lighter: #d9d8d7;
    --_primitives---colors--surface-light: #7c7875;
    --_primitives---colors--primary-lightest: #f6faf9;
    --_primitives---colors--primary-lighter: #edf6f3;
    --_primitives---colors--secondary-light: #fad6b9;
    --_primitives---colors--secondary-dark: #c79d7c;
    --_primitives---colors--secondary: var(--brand-color-warm);
    --_primitives---colors--secondary-darkest: #4a3b2e;
    --_primitives---colors--info-lighter: #edf2f6;
    --_primitives---colors--info-lightest: #f6f8fa;
    --_primitives---colors--info-light: #c0d3e1;
    --_primitives---colors--info: #a6c1d5;
    --_primitives---colors--info-dark: #849aaa;
    --_primitives---colors--secondary-darker: #634e3e;
    --_primitives---colors--info-darker: #424d55;
    --_primitives---colors--info-darkest: #31393f;
    --_primitives---colors--danger-lighter: #feebea;
    --_primitives---colors--danger-lightest: #fef5f4;
    --_primitives---colors--danger-light: #fcbbb6;
    --_primitives---colors--danger: #fc9f97;
    --_primitives---colors--danger-dark: #c97f78;
    --_primitives---colors--danger-darker: #643f3c;
    --_primitives---colors--danger-darkest: #4b2f2d;
    --_primitives---colors--warning-lightest: #fff9eb;
    --_primitives---colors--warning-lighter: #fff3d6;
    --_primitives---colors--warning-light: #ffe3a3;
    --_primitives---colors--warning: #ffd666;
    --_primitives---colors--warning-dark: #c7a650;
    --_primitives---colors--warning-darker: #645328;
    --_primitives---colors--warning-darkest: #4b3e1e;
    /*--base-color-neutral--neutral-lightest:;*/
}

html, body {
    overscroll-behavior: none;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--_primitives---colors--surface-darkest);
    font-family: var(--_typography---font-styles--body);
    overflow-x: hidden;
}

/* ─── Reusable scrollbar component ──────────────────────────────────────────
   Apply .scrollbar-thin to any overflow-y: auto/scroll container.
   Uses dark-theme palette variables from global.css.
   ─────────────────────────────────────────────────────────────────────────── */
.scrollbar-thin {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--_primitives---colors--surface-light) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--_primitives---colors--surface-light);
    border-radius: 99px;
    transition: background 0.2s;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--_primitives---colors--primary-dark);
}