:root {
    /* Luxury Palette */
    --color-bg: #FAFAF9;        /* Warm Off-White (Fallback) */
    --color-bg-gradient-start: #FFFFFF;
    --color-bg-gradient-end: #EBE5DE; /* Darker Sand/Beige for visibility */
    
    --color-text: #1C1C1C;      /* Deep Charcoal */
    --color-text-light: #5A5A5A;
    --color-accent: #A68A64;    /* Muted Gold/Bronze */
    --color-accent-dark: #8C7352;
    --color-border: #E5E5E5;
    --color-white: #FFFFFF;

    /* Background Shapes */
    --color-shape-blob: rgba(220, 200, 180, 0.5); /* Stronger Beige/Gold Blob */
    
    /* Typography */
    --font-primary: 'Outfit', 'Mitr', sans-serif;
    --font-heading: 'Playfair Display', 'Mitr', serif;
    --font-th: 'Mitr', sans-serif;
    
    /* Spacing - More breathing room */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1.5rem;   /* 24px */
    --spacing-md: 3rem;     /* 48px */
    --spacing-lg: 6rem;     /* 96px */
    --spacing-xl: 10rem;    /* 160px */
    
    /* Layout */
    --container-width: 1320px; /* Wider for modern screens */
    --header-height: 90px;
    --border-radius: 0px;      /* Sharp edges for luxury feel */
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    background-image: linear-gradient(135deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height); /* Standardize offset for fixed header */
    min-height: 100vh;
    position: relative;
}

/* Luxury Grain Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.07; /* Increased to 7% for visibility */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    background-size: 150px 150px; /* Seamless tiling */
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-th); /* Kanit for Headings (works well for EN too) */
    font-weight: 400; /* Lighter weights look more premium */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; margin-bottom: 2rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 1rem;
    color: var(--color-text-light);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }

/* Grid System */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Wider gap */
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 30px; }
    .container { padding: 0 1.5rem; }
    --spacing-lg: 4rem;
}