/* Core font declarations */
@font-face {
    font-family: 'Clearface';
    src: url('/assets/fonts/ClearfaceStd-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/assets/fonts/DMSans-VariableFont_opsz\,wght.ttf') format('truetype-variations');
    font-weight: 500;
}

@font-face {
    font-family: 'DM Mono';
    src: url('/assets/fonts/DMMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/assets/fonts/fa-brands-400.woff2") format("woff2");
}

/* Base variables - Light theme defaults */
:root {

    /* Core font stacks */
    --font-heading: 'Clearface', serif;
    --font-body: 'DM Sans', sans-serif;
    --font-button: 'DM Mono', monospace;

    /* Colour scales (100-900) */
    --text-100: #e2e5e9;
    --text-200: #c4cad4;
    --text-300: #a7b0be;
    --text-400: #8a96a8;
    --text-500: #6c7c93;
    --text-600: #576375;
    --text-700: #414a58;
    --text-800: #2b313b;
    --text-900: #16191d;

    --background-100: #e0e5eb;
    --background-200: #c1cbd7;
    --background-300: #a2b1c3;
    --background-400: #8397af;
    --background-500: #637d9c;
    --background-600: #50647c;
    --background-700: #3c4b5d;
    --background-800: #28323e;
    --background-900: #14191f;

    --primary-100: #e2e6e9;
    --primary-200: #c5ccd3;
    --primary-300: #a8b3bd;
    --primary-400: #8b99a7;
    --primary-500: #6e8091;
    --primary-600: #586674;
    --primary-700: #424d57;
    --primary-800: #2c333a;
    --primary-900: #161a1d;

    --secondary-100: #e0ddee;
    --secondary-200: #c0bbdd;
    --secondary-300: #a198cd;
    --secondary-400: #8276bc;
    --secondary-500: #6354ab;
    --secondary-600: #4f4389;
    --secondary-700: #3b3267;
    --secondary-800: #272244;
    --secondary-900: #141122;

    --accent-100: #fce8cf;
    --accent-200: #f9d19f;
    --accent-300: #f7b96e;
    --accent-400: #f4a23e;
    --accent-500: #f18b0e;
    --accent-600: #c16f0b;
    --accent-700: #915308;
    --accent-800: #603806;
    --accent-900: #301c03;

    /* Theme colours */
    --color-bg-primary: var(--background-100);
    --color-bg-secondary: var(--background-200);
    --color-text-primary: var(--text-900);
    --color-text-secondary: var(--text-600);
    --color-primary-default: var(--primary-500);
    --color-secondary-default: var(--secondary-500);
    --color-accent-default: var(--accent-500);
    --color-danger: #eb1a1a;
    --color-danger-hover: #e10f0f;
    --color-shadow: #00000029;
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 4px 12px var(--color-shadow);
    --shadow-lg: 0 8px 24px var(--color-shadow);
    --shadow-card-hover: 0 4px 12px var(--color-shadow);

    /* Layout measurements */
    --border-radius-sm: 4px;
    --border-radius-md: 5px;
    --border-radius-lg: 10px;
    --border-radius-full: 9999px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Type scale */
    --text-xs: 0.9rem;
    --text-sm: 1rem;
    --text-md: 1.2rem;
    --text-lg: 1.5rem;
    --text-xl: 1.75rem;
    --text-xxl: 2rem;
    --text-3xl: 2.5rem;

    /* Animation settings */
    --transition-speed: 0.3s;
    --transition-timing: ease;
}

/* Dark theme colour overrides */
[data-theme="dark"] {
    --text-100: #14191f;
    --text-200: #28323e;
    --text-300: #3c4b5d;
    --text-400: #50647c;
    --text-500: #637d9c;
    --text-600: #8397af;
    --text-700: #a2b1c3;
    --text-800: #c1cbd7;
    --text-900: #e0e5eb;

    --background-100: #1c1f23;
    --background-200: #2b313b;
    --background-300: #414a58;
    --background-400: #576375;
    --background-500: #6c7c93;
    --background-600: #8a96a8;
    --background-700: #a7b0be;
    --background-800: #c4cad4;
    --background-900: #e2e5e9;

    --primary-100: #161a1d;
    --primary-200: #2c333a;
    --primary-300: #424d57;
    --primary-400: #586674;
    --primary-500: #6e8091;
    --primary-600: #8b99a7;
    --primary-700: #a8b3bd;
    --primary-800: #c5ccd3;
    --primary-900: #e2e6e9;

    --secondary-100: #141122;
    --secondary-200: #272244;
    --secondary-300: #3b3267;
    --secondary-400: #4f4389;
    --secondary-500: #6354ab;
    --secondary-600: #8276bc;
    --secondary-700: #a198cd;
    --secondary-800: #c0bbdd;
    --secondary-900: #e0ddee;

    --accent-100: #301c03;
    --accent-200: #603806;
    --accent-300: #915308;
    --accent-400: #c16f0b;
    --accent-500: #f18b0e;
    --accent-600: #f4a23e;
    --accent-700: #f7b96e;
    --accent-800: #f9d19f;
    --accent-900: #fce8cf;

    --color-shadow: #ffffff29;
}

/* Brand icon unicode mappings */
.fa-instagram {
    --fa: "\f16d";
}

.fa-reddit {
    --fa: "\f1a1";
}

.fa-facebook {
    --fa: "\f09a";
}

.fa-google {
    --fa: "\f1a0";
}

.fa-apple {
    --fa: "\f179";
}

/* Font utility classes */
.heading-font {
    font-family: var(--font-heading);
}

.body-font {
    font-family: var(--font-body);
}

.button-font {
    font-family: var(--font-button);
}