/**
 * Main Stylesheet: Sitewide Foundation
 *
 * This file defines the global look and feel, typography, color palette,
 * and basic layout structure. It does NOT contain styles for specific,
* complex components.
 */

/* 1. CSS Custom Properties (Variables)
--------------------------------------------- */
:root {
  /* Base Palette */
  --background-color: #FDFCF8; /* Subtle, warm off-white */
  --content-bg: #F7F5F0;       /* Slightly darker warm gray for frames */

  /* Monochromatic "Silver" Scale */
  --color-silver-100: #f8fafc;
  --color-silver-200: #e2e8f0; /* For borders/dividers */
  --color-silver-300: #cbd5e1; /* For borders/dividers */
  --color-silver-400: #94a3b8; /* Muted gray for secondary text */
  --color-silver-500: #64748b; /* Muted gray for secondary text */
  --color-silver-600: #475569; /* Main body text */
  --color-silver-700: #334155; /* Main body text */
  --color-silver-800: #1e293b; /* Primary headings */
  --color-silver-900: #0f172a; /* Almost black for critical text */

  /* Accent Colors (Used Sparingly) */
  --color-accent-purchase: #00bfff; /* Bright Blue for Purchase CTA */
  --color-accent-interactive: #ea580c; /* Orange for special interactions */

  /* Typography */
  --primary-font: 'Avril Fatface', 'Georgia', serif;
  --secondary-font: 'Source Serif Pro', 'Helvetica', sans-serif;
  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 400; /* Note: Source Serif Pro regular is 400 */
  --weight-bold: 700;

  /* Spacing System */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 7.5rem;  /* 120px */
}

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

/* 3. Base Typography
--------------------------------------------- */
body {
  font-family: var(--secondary-font); /* Source Serif Pro */
  color: var(--color-silver-700);
  background-color: var(--background-color);
  line-height: 1.7; /* Generous line height for readability */
  font-weight: var(--weight-regular);
}

h1, h2, h3 {
  font-family: var(--primary-font); /* Avril Fatface */
  color: var(--color-silver-800);
  font-weight: var(--weight-light); /* Light and airy headings */
}

/* 4. General Layout & Containers
--------------------------------------------- */
.container {
    width: 90%;
    max-width: 1200px; /* Standard container */
    margin-left: auto;
    margin-right: auto;
}

/* 5. Buttons & Interactive Elements
--------------------------------------------- */

/* Secondary "Ghost" Button */
.cta-button {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: transparent;
  color: var(--color-silver-500);
  border: 1px solid var(--color-silver-300);
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: var(--color-silver-800);
  border-color: var(--color-silver-800);
  color: #fff;
}

/* 6. Video Scrubber Component
--------------------------------------------- */
.scroll-video-container {
    position: relative;
    cursor: pointer;
}

.scroll-video {
    width: 100%;
    height: auto;
    display: block;
}

.video-scrollbar {
    width: 100%;
    height: 10px;
    background-color: var(--color-silver-200);
    border-radius: 3px;
    margin-top: var(--space-md);
    position: relative;
    cursor: pointer;
}

.video-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0; /* JS will update this */
    width: 20px;
    height: 10px;
    background-color: var(--color-silver-500);
    border-radius: 3px;
    cursor: grab;
}

.video-scrollbar-thumb:active {
    cursor: grabbing;
}