/* CSS Variables and Global Reset */
:root {
  /* Colors from Figma Design System */
  --color-primary: #313331;        /* Greyscale/500 (neutral) */
  --color-secondary: #694ae9;      /* Mystic Purple Accent/300 */
  --color-accent: #b8860b;         /* Gold Accent/300 */
  --color-highlight: #e5d2a1;      /* Gold Accent/200 */
  /* Light theme colors */
  --color-bg: #ffffff;             /* Light background */
  --color-bg-alt: #f6f6f6;         /* Slightly off-white */
  --color-bg-dark: #f0f0f0;        /* Light panel background */
  --color-text: #111827;           /* Dark text for light backgrounds */
  --color-text-light: #374151;     /* Muted/dim text */
  --color-text-dark: #0b0b0b;      /* Deep dark for headings */
  --color-border: #e5e7eb;         /* Light border */
  --color-white: #ffffff;          /* Pure white */
  --color-tertiary: #f7fcff;       /* Tertiary/100 */
  
  /* Typography from Figma */
  --font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  
  /* Font Sizes */
  --font-size-section: 26px;      /* Title/Section */
  --font-size-subsection: 22px;   /* Title/Subsection */
  --font-size-body-title: 18px;   /* Title/Body */
  --font-size-body: 16px;         /* Body Default/medium emphasis */
  --font-size-body-small: 14px;   /* Body Default/emphasis */
  --font-size-small: 12px;        /* Body Small/regular */
  
  /* Line Heights */
  --line-height-section: 32px;
  --line-height-subsection: 28px;
  --line-height-body-title: 24px;
  --line-height-body: 24px;
  --line-height-body-small: 22px;
  --line-height-small: 16px;
  
  /* Font Weights */
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
  
  --font-size-base: 1rem;
  --font-size-lg: 2rem;
  --font-size-xl: 2.5rem;
  --font-size-xxl: 3.5rem;
  
  --border-radius: 0.5rem;
  --box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --transition: all 0.3s ease;
}

* {
  /* margin: 0; */
  /* padding: 0; */
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  /* color: var(--color-text); */
}

h1 { 
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-section);
}
h2 { 
  font-size: var(--font-size-section);
  line-height: var(--line-height-section);
}
h3 { 
  font-size: var(--font-size-subsection);
  line-height: var(--line-height-subsection);
}
h4 { 
  font-size: var(--font-size-body-title);
  line-height: var(--line-height-body-title);
}

/* p {
  /* margin-bottom: var(--spacing-sm); */
  /* color: var(--color-text); */
/* } */

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

ul {
  list-style: none;
}

a {
  color: var(--color-highlight);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-accent);
}