/* --- Local Fonts (Self-hosted) --- */
@font-face {
    font-family: 'Goldman';
    src: url('../assets/fonts/Goldman/Goldman-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Goldman';
    src: url('../assets/fonts/Goldman/Goldman-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/Kanit/Kanit-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/Kanit/Kanit-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/Kanit/Kanit-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/Kanit/Kanit-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../assets/fonts/Kanit/Kanit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Base variables */

:root {
    /* --- Base Colors (HEX) --- */
    --color-primary: #894a81;
    --color-primary-hover: #76356d;
    --color-primary-light: #a65ba1;
    --color-primary-deep: #45243E;
    --color-secondary: #7F5188;

    --color-white: #FEFEFE;
    --color-black: #232323;
    --color-dark-bg: #161616;
    --color-gray-800: #333333;
    --color-gray-600: #4D4D4D;
    --color-gray-400: #a3a3a3;
    --color-gray-200: #cacaca;
    --color-gray-100: #F5F5F5;

    /* --- RGB Components (For Alpha usage) --- */
    --color-primary-rgb: 137, 74, 129;
    --color-secondary-rgb: 127, 81, 136;
    --color-white-rgb: 254, 254, 254;
    --color-black-rgb: 35, 35, 35;
    --color-dark-bg-rgb: 22, 22, 22;

    /* --- Semantic UI Colors --- */
    /* Backgrounds */
    --bg-body: var(--color-white);
    --bg-nav: var(--color-gray-100);
    --bg-section-accent: #E9D9EE;
    --bg-section-soft: #f9f5f9;
    --bg-footer: var(--color-black);

    /* Text */
    --text-primary: var(--color-primary);
    --text-dark: var(--color-gray-800);
    --text-gray: var(--color-gray-600);
    --text-light: var(--color-white);
    --text-muted: var(--color-gray-400);

    /* Elements & Buttons */
    --btn-bg: var(--color-primary);
    --btn-hover: var(--color-primary-hover);

    /* Effects (Gradients & Shadows) */
    --shadow-premium: 0 25px 50px -12px rgba(var(--color-primary-rgb), 0.4);
    --shadow-glass: 0 8px 32px 0 rgba(76, 33, 70, 0.1);
    --shadow-dark: 0 25px 45px rgba(var(--color-black-rgb), 0.2);
    --gradient-glass: linear-gradient(135deg, rgba(var(--color-white-rgb), 0.1) 0%, rgba(var(--color-white-rgb), 0.05) 100%);
    --gradient-surface: linear-gradient(135deg, var(--color-white) 0%, var(--bg-section-soft) 100%);
    --gradient-motus: linear-gradient(145deg, var(--color-primary), var(--color-primary-light));

    /* Glassmorphism Defaults */
    --glass-bg: rgba(var(--color-white-rgb), 0.03);
    --glass-border: rgba(var(--color-white-rgb), 0.05);
    --glass-border-opaque: rgba(var(--color-white-rgb), 0.8);

    /* --- Aurora Effect Colors --- */
    --color-aurora-violet: #6c3baa;
    --color-aurora-violet-rgb: 108, 59, 170;
    --color-aurora-blue: #3b4aaa;
    --color-aurora-blue-rgb: 59, 74, 170;
    --color-aurora-pink: #c4457e;
    --color-aurora-pink-rgb: 196, 69, 126;

    /* --- Header --- */
    --header-height: 72px;

    /* --- Layout Constants --- */
    --font-kanit: 'Kanit', sans-serif;
    --font-goldman: 'Goldman', sans-serif;
}