/* Inter from the app's assets/fonts */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/explore-assets/fonts/Inter-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/explore-assets/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/explore-assets/fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/explore-assets/fonts/Inter-SemiBold.ttf') format('truetype'); }

* { margin: 0; padding: 0; box-sizing: border-box; }
button { font-family: inherit; }
html { color-scheme: light; }
html, body { width: 100%; overflow-x: hidden; }

/* The Website's scrollbar (index.css): a brand-purple thumb on a light track. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #7a4ca5; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #5f3885; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--surface-page-secondary);
    color: #0C0C0C;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --text-primary: #0C0C0C;
    --text-secondary: #4D4D4D;
    --text-tertiary: #B2B2B2;
    --text-inverse: #FFFFFF;
    --text-brand: #7A4CA5;

    --surface-page: #FFFFFF;
    --surface-page-secondary: #F2F2F2;
    --surface-primary-60: rgba(12, 12, 12, 0.6);
    --surface-primary-40: rgba(12, 12, 12, 0.4);
    --surface-primary-90: rgba(255, 255, 255, 0.9);

    --divider-primary: #E9E9E9;
    --border-primary: #D8D8D8;
    --border-brand: #7A4CA5;
    --surface-primary: #0C0C0C;
    --surface-primary-hover: #545454;
    --surface-studio-mist: #F7F4FA;
    --border-brand-subtle: #E4DBED;

    --item-card-width: min(calc((100vw - 32px) * 0.77), 320px);
}

/* Typography (from theme/typography/primitives.js) */
.heading-sm { font-size: 18px; line-height: 24px; font-weight: 600; }
.heading-lg { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.12px; }
.body-xl-semiBold { font-size: 20px; line-height: 30px; font-weight: 600; }
.body-xl-medium { font-size: 20px; line-height: 30px; font-weight: 500; }
.body-lg-semiBold { font-size: 18px; line-height: 27px; font-weight: 600; }
.body-lg-medium { font-size: 18px; line-height: 27px; font-weight: 500; }
.body-md-semiBold { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-md-medium { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-md-normal { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm-semiBold { font-size: 14px; line-height: 21px; font-weight: 600; }
.body-sm-medium { font-size: 14px; line-height: 21px; font-weight: 500; }
.body-sm-normal { font-size: 14px; line-height: 21px; font-weight: 400; }
.body-xs-medium { font-size: 12px; line-height: 18px; font-weight: 500; }
.body-xs-normal { font-size: 12px; line-height: 18px; font-weight: 400; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-brand { color: var(--text-brand); }
.text-inverse { color: var(--text-inverse); }