/* =============================================================================
   BASE.CSS — CR8TIF Design System
   Reset, custom properties, typography, grain overlay
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Custom Properties
   --------------------------------------------------------------------------- */
:root {
  /* Primary: Deep luxury palette */
  --bg-dark: #2D2620;
  --bg-dark-alt: #3A332B;

  /* Main background — warm, golden light */
  --bg-light: #F5F0E8;
  --bg-light-alt: #EBE4D8;

  /* Text on dark */
  --text: #F0ECE6;
  --text-muted: #B5AFA7;

  /* Text on light */
  --text-dark: #2A2520;
  --text-dark-muted: #7A746E;

  /* Accent — copper */
  --copper: #B87333;
  --copper-dim: rgba(184, 115, 51, 0.35);
  --copper-faint: rgba(184, 115, 51, 0.08);
  --gold: #B87333;
  --gold-dim: rgba(184, 115, 51, 0.35);
  --gold-faint: rgba(184, 115, 51, 0.08);

  /* Borders */
  --border: rgba(232, 226, 217, 0.15);
  --border-light: rgba(232, 226, 217, 0.25);
  --border-dark: rgba(42, 37, 32, 0.12);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing — more generous for luxury feel */
  --section-pad: clamp(7rem, 14vh, 12rem);
  --side-pad: clamp(2rem, 5vw, 6rem);
  --max-w: 1440px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}

body {
  background: var(--bg-light);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  position: relative;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Remove default focus styles, we'll add custom ones */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Typography Scale
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

h1 {
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2.1rem, 3.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.25;
}

h5 {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h6 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.6;
}

.small {
  font-size: 0.85rem;
  line-height: 1.7;
}

.caption {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Text colors for light/dark sections — .section-- prefix (inner pages) */
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4,
.section--light h5,
.section--light h6 {
  color: var(--text-dark);
}

.section--light p,
.section--light li {
  color: var(--text-dark-muted);
}

.section--light .lead {
  color: var(--text-dark);
}

.section--light-alt h1,
.section--light-alt h2,
.section--light-alt h3,
.section--light-alt h4,
.section--light-alt h5,
.section--light-alt h6 {
  color: var(--text-dark);
}

.section--light-alt p,
.section--light-alt li {
  color: var(--text-dark-muted);
}

.section--light-alt .lead {
  color: var(--text-dark);
}

/* Text colors for light/dark sections — .bg- utility prefix (homepage) */
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
  color: var(--text-dark);
}

.bg-light p,
.bg-light li {
  color: var(--text-dark-muted);
}

.bg-light .lead {
  color: var(--text-dark);
}

.bg-light .section-label {
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   Background Utility Classes
   --------------------------------------------------------------------------- */
.bg-dark {
  background: var(--bg-dark);
  color: var(--text);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 {
  color: var(--text);
}

.bg-dark p, .bg-dark li {
  color: var(--text-muted);
}

.bg-dark-alt {
  background: var(--bg-dark-alt);
  color: var(--text);
}

.bg-dark-alt h1, .bg-dark-alt h2, .bg-dark-alt h3,
.bg-dark-alt h4, .bg-dark-alt h5, .bg-dark-alt h6 {
  color: var(--text);
}

.bg-dark-alt p, .bg-dark-alt li {
  color: var(--text-muted);
}

.bg-light {
  background: var(--bg-light);
  color: var(--text-dark);
}

.bg-light-alt {
  background: var(--bg-light-alt);
  color: var(--text-dark);
}

.bg-light-alt h1, .bg-light-alt h2, .bg-light-alt h3,
.bg-light-alt h4, .bg-light-alt h5, .bg-light-alt h6 {
  color: var(--text-dark);
}

.bg-light-alt p, .bg-light-alt li {
  color: var(--text-dark-muted);
}

.bg-light-alt .lead {
  color: var(--text-dark);
}

.bg-light-alt .section-label {
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   Layout Container
   --------------------------------------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* ---------------------------------------------------------------------------
   Selection
   --------------------------------------------------------------------------- */
::selection {
  background: var(--gold);
  color: var(--bg-dark);
}

::-moz-selection {
  background: var(--gold);
  color: var(--bg-dark);
}

/* ---------------------------------------------------------------------------
   Scrollbar
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ---------------------------------------------------------------------------
   Grain / Noise Texture Overlay
   --------------------------------------------------------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---------------------------------------------------------------------------
   Utility: Visually Hidden (for accessibility)
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}