/* base.css — design tokens, typography, global styles */

/* =====================
   DESIGN TOKENS
   ===================== */
:root {

  /* Brand Colors */
  --color-rose:         #B85C6E;
  --color-rose-dark:    #8B3D50;
  --color-rose-deeper:  #6B2D3E;
  --color-rose-light:   #F5E8EB;
  --color-rose-pale:    #FBF3F5;

  /* Neutrals */
  --color-warm-bg:      #F9F6F2;
  --color-warm-mid:     #F0EBE5;
  --color-border:       #E4D8D2;
  --color-border-light: #EDE6E1;
  --color-white:        #FFFFFF;

  /* Text */
  --color-text:         #2A1F1C;
  --color-text-mid:     #5C4A45;
  --color-text-light:   #9A8580;
  --color-text-muted:   #BDB0AC;

  /* Semantic */
  --color-green:        #3B6D45;
  --color-green-light:  #EBF3EC;
  --color-amber:        #B87A2A;
  --color-amber-light:  #FBF3E4;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Nunito', Arial, sans-serif;

  /* Font Sizes — larger for senior accessibility */
  --text-xs:   14px;
  --text-sm:   16px;
  --text-base: 18px;
  --text-md:   20px;
  --text-lg:   24px;
  --text-xl:   30px;
  --text-2xl:  38px;
  --text-3xl:  48px;
  --text-4xl:  60px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --max-width:       1080px;
  --max-width-text:  680px;
  --gutter:          24px;

  /* Borders */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(42,31,28,0.08);
  --shadow-md: 0 4px 16px rgba(42,31,28,0.10);
  --shadow-lg: 0 8px 32px rgba(42,31,28,0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Nav height (used for scroll offset) */
  --nav-height: 68px;
}

/* =====================
   GOOGLE FONTS IMPORT
   ===================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Nunito:wght@400;500;600;700&display=swap');

/* =====================
   BASE TYPOGRAPHY
   ===================== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-text);
  font-weight: 700;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-mid);
}

strong {
  font-weight: 700;
  color: var(--color-text);
}

em {
  font-style: italic;
  color: var(--color-rose-dark);
}

/* =====================
   FOCUS ACCESSIBILITY
   ===================== */
:focus-visible {
  outline: 3px solid var(--color-rose);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =====================
   SELECTION
   ===================== */
::selection {
  background: var(--color-rose-light);
  color: var(--color-rose-dark);
}

/* =====================
   SCROLL OFFSET FOR ANCHOR
   ===================== */
[id] {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* =====================
   SCREEN READER ONLY
   ===================== */
.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;
}

/* =====================
   SKIP LINK
   ===================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  background: var(--color-rose);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}