/* ==========================================================================
   BASE — CSS Variables, Reset, Typography
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Palette — Nordic Birch & Ash */
  --color-bg:           #F5F2EE;   /* warm off-white, like birch paper */
  --color-bg-alt:       #EDE9E3;   /* slightly deeper cream */
  --color-surface:      #FFFFFF;
  --color-dark:         #1A1916;   /* near-black, aged charcoal */
  --color-text:         #2C2A27;   /* dark warm grey */
  --color-text-muted:   #7A7570;
  --color-border:       #D8D3CC;
  --color-primary:      #1A1916;   /* black — used for CTAs, headers */
  --color-accent:       #8B6F4E;   /* warm cedar/amber */
  --color-accent-light: #C4A882;   /* lighter cedar for hovers */
  --color-white:        #FFFFFF;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.75rem;
  --text-4xl:   3.75rem;
  --text-5xl:   5rem;
  --text-6xl:   7rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* Container */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-pad:  clamp(1.5rem, 5vw, 4rem);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;

  /* Borders & Radius */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --border-thin: 1px solid var(--color-border);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(26,25,22,0.08);
  --shadow-md:  0 4px 16px rgba(26,25,22,0.10);
  --shadow-lg:  0 12px 40px rgba(26,25,22,0.14);
  --shadow-xl:  0 24px 64px rgba(26,25,22,0.18);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Typography Base
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-dark);
}

h1 { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  3vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-family: var(--font-body); letter-spacing: var(--tracking-wider); text-transform: uppercase; }

p {
  max-width: 68ch;
  color: var(--color-text);
}

.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

strong { font-weight: 500; }
em     { font-style: italic; }

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Scrollbar (Webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--color-bg); }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-light); }