@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: #161618;
    --brand-color-warm: #adc342;
    --brand-color-warm-lightest: #fbfcf6;
    --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);
    --logo-width: 120px;
    --logo-width-md: 100px;
    --logo-width-sm: 90px;
}

: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: #161618;
    --_primitives---opacity--white-20: #fff3;
    --_primitives---colors--surface: #161618;
    --input-border-color: #3a3a3a;
    --footer-text-color: #6b6b6b;
    --_primitives---colors--surface-dark: var(--brand-color-surface-alt);
    --_primitives---colors--primary: #adc342;
    --_ui-styles---stroke--border-width: 1px;
    --_primitives---opacity--neutral-darkest-5: #0000000d;
    --_primitives---opacity--white-10: #ffffff1a;
    --_primitives---colors--neutral-lighter: #e0e0e0;
    --_primitives---colors--primary-dark: #a9c038;
    --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: #d8e6a2;
    --_primitives---colors--primary-darker: #8fa02e;
    --_ui-styles---radius--large: 16px;
    --_ui-styles---radius--pill: 999px;
    --_ui-styles---stroke--divider-width: 1px;
    --_primitives---colors--transparent: transparent;
    --home-accent-glow: color-mix(in srgb, var(--_primitives---colors--primary) 12%, transparent);
    --home-bg-image: none;
    --home-bg-overlay: var(--_primitives---colors--surface-darker);
    --home-content-border: var(--_primitives---opacity--white-10);
    --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: #64751f;
    --_primitives---colors--surface-darker: #1c1c1e;
    --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: #fbfcf6;
    --color-scheme-2--accent: var(--_primitives---colors--primary);
    --_primitives---colors--secondary-lighter: #eff5d7;
    --_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: #0a0a0a;
    --_primitives---colors--neutral-light: #b5b5b5;
    --_primitives---colors--neutral: #959595;
    --_primitives---colors--neutral-dark: #494949;
    --_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: #2c2c2c;
    --_primitives---colors--surface-lighter: #222222;
    --_primitives---colors--surface-light: #616161;
    --_primitives---colors--primary-lightest: #f6f8ed;
    --_primitives---colors--primary-lighter: #e6efc3;
    --_primitives---colors--secondary-light: #d8e6a2;
    --_primitives---colors--secondary-dark: #8fb73e;
    --_primitives---colors--secondary: var(--brand-color-warm);
    --_primitives---colors--secondary-darkest: #64751f;
    --_primitives---colors--info-lighter: #eff5d7;
    --_primitives---colors--info-lightest: #f6f8ed;
    --_primitives---colors--info-light: #d8e6a2;
    --_primitives---colors--info: #adc342;
    --_primitives---colors--info-dark: #8fb73e;
    --_primitives---colors--secondary-darker: #8fa02e;
    --_primitives---colors--info-darker: #64751f;
    --_primitives---colors--info-darkest: #161618;
    --_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: #f6f8ed;
    --_primitives---colors--warning-lighter: #e6efc3;
    --_primitives---colors--warning-light: #d8e6a2;
    --_primitives---colors--warning: #adc342;
    --_primitives---colors--warning-dark: #a9c038;
    --_primitives---colors--warning-darker: #8fa02e;
    --_primitives---colors--warning-darkest: #64751f;
    /*--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);
}