@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200&display=swap');

:root {
  /* Light Theme Color Tokens */
  --bg-background: #fbf9f5;
  --color-surface: #ffffff;
  --color-surface-dim: #dbdad6;
  --color-surface-bright: #fbf9f5;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ef;
  --color-surface-container: #efeeea;
  --color-surface-container-high: #eae8e4;
  --color-surface-container-highest: #e4e2de;
  --color-on-surface: #1b1c1a;
  --color-on-surface-variant: #444844;
  --color-outline: #757873;
  --color-outline-variant: #c5c7c2;
  
  --color-primary: #1a1d1a;
  --color-on-primary: #ffffff;
  --color-primary-container: #2c302c;
  --color-on-primary-container: #c5c7c2;
  --color-primary-fixed-dim: #838581;
  
  --color-secondary: #3d5a45;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #c9ebcf;
  --color-on-secondary-container: #23422a;
  
  --color-tertiary: #d4a373;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #f5e4d2;
  --color-on-tertiary-container: #68421c;

  --color-glass-bg: rgba(251, 249, 245, 0.85);
  --color-glass-border: rgba(27, 28, 26, 0.08);
  --color-card-shadow: rgba(27, 28, 26, 0.04);
  
  /* Fonts */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  
  /* Spacing & Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  --container-max: 1440px;
  --header-height: 80px;
}

[data-theme="dark"] {
  /* Dark Theme Color Tokens */
  --bg-background: #121412;
  --color-surface: #1c1f1c;
  --color-surface-dim: #151815;
  --color-surface-bright: #282c28;
  --color-surface-container-lowest: #171917;
  --color-surface-container-low: #212521;
  --color-surface-container: #272c27;
  --color-surface-container-high: #2f342f;
  --color-surface-container-highest: #383e38;
  --color-on-surface: #f2f0ed;
  --color-on-surface-variant: #c5c7c2;
  --color-outline: #8e928c;
  --color-outline-variant: #444844;
  
  --color-primary: #e1e3de;
  --color-on-primary: #191c19;
  --color-primary-container: #3a3e3a;
  --color-on-primary-container: #e1e3de;
  --color-primary-fixed-dim: #aecfb4;
  
  --color-secondary: #8fc29b;
  --color-on-secondary: #0c2b14;
  --color-secondary-container: #264730;
  --color-on-secondary-container: #c9ebcf;
  
  --color-tertiary: #e6b98e;
  --color-on-tertiary: #301b05;
  --color-tertiary-container: #4a3016;
  --color-on-tertiary-container: #f5e4d2;

  --color-glass-bg: rgba(28, 31, 28, 0.85);
  --color-glass-border: rgba(242, 240, 237, 0.12);
  --color-card-shadow: rgba(0, 0, 0, 0.35);
}

/* Base Responsive Typography & Safe Screen Rules */
html {
  font-family: var(--font-body);
  background-color: var(--bg-background);
  color: var(--color-on-surface);
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-background);
  color: var(--color-on-surface);
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll on small screens */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Text Wrapping & Safety for Small Resolutions */
h1, h2, h3, h4, h5, h6, p, span, a, label, button {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

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

/* Dynamic Typography scaling using clamp() */
.text-display-fluid {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1.15;
  font-weight: 600;
}

.text-headline-lg-fluid {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
  line-height: 1.2;
  font-weight: 500;
}

.text-headline-md-fluid {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw + 0.3rem, 2rem);
  line-height: 1.25;
  font-weight: 500;
}

.text-headline-sm-fluid {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw + 0.2rem, 1.5rem);
  line-height: 1.3;
  font-weight: 500;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: var(--radius-full);
}