/* ==========================================================================
   Base CSS — CSS Custom Properties Interface + Shared Utilities
   Rehab Website Factory (2025-2026)

   ALL visual values use var(--property). Style CSS files override these.
   Architecture CSS files use ONLY layout properties (display, position, etc.)

   Modern features: @layer, CSS Nesting, clamp(), container queries,
   prefers-color-scheme, scroll-behavior, gap-based spacing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer Declarations — controls cascade order
   -------------------------------------------------------------------------- */
@layer reset, tokens, base, layout, utilities, components, overrides;

/* --------------------------------------------------------------------------
   CSS Custom Properties Interface
   Each style file (e.g., 01-calm-ocean.css) overrides these on :root
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Colors — Light Mode (default) */
    --color-primary: #4A90A4;
    --color-primary-rgb: 74, 144, 164;
    --color-secondary: #7BC4C4;
    --color-secondary-rgb: 123, 196, 196;
    --color-accent: #F0F7F4;
    --color-accent-rgb: 240, 247, 244;
    --color-text: #2C3E50;
    --color-text-light: #5A6C7E;
    --color-text-inverse: #FFFFFF;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8FBFC;
    --color-bg-dark: #1A2530;
    --color-border: #E2E8F0;
    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-error: #DC3545;

    /* Typography */
    --font-heading: 'Lato', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Fluid Type Scale using clamp() — scales between 375px and 1200px viewports */
    --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);       /* ~11-12px */
    --text-sm: clamp(0.8rem, 0.74rem + 0.3vw, 0.875rem);      /* ~13-14px */
    --text-base: clamp(0.9375rem, 0.87rem + 0.33vw, 1rem);     /* ~15-16px */
    --text-lg: clamp(1rem, 0.91rem + 0.45vw, 1.125rem);        /* ~16-18px */
    --text-xl: clamp(1.1rem, 0.98rem + 0.6vw, 1.25rem);        /* ~18-20px */
    --text-2xl: clamp(1.25rem, 1.05rem + 1vw, 1.563rem);       /* ~20-25px */
    --text-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.953rem);       /* ~24-31px */
    --text-4xl: clamp(1.75rem, 1.3rem + 2.25vw, 2.441rem);     /* ~28-39px */
    --text-5xl: clamp(1.8rem, 1.2rem + 2vw, 3.052rem);         /* ~29-49px */

    /* Spacing Scale */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.5rem;     /* 24px */
    --space-6: 2rem;       /* 32px */
    --space-8: 3rem;       /* 48px */
    --space-10: 4rem;      /* 64px */
    --space-12: 5rem;      /* 80px */
    --space-16: 8rem;      /* 128px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.15);

    /* Hero Overlay */
    --hero-overlay: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.7), rgba(0,0,0,0.3));

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --header-height: 80px;
  }

  /* --------------------------------------------------------------------------
     Dark Mode — automatic via prefers-color-scheme
     Style files can override these too for themed dark palettes
     -------------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text: #E2E8F0;
      --color-text-light: #A0AEC0;
      --color-text-inverse: #1A202C;
      --color-bg: #1A202C;
      --color-bg-alt: #2D3748;
      --color-bg-dark: #0D1117;
      --color-border: #4A5568;
      --color-accent: #2D3748;
      --color-accent-rgb: 45, 55, 72;

      /* Softer shadows for dark mode */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
      --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);

      /* Slightly brighter primary for dark backgrounds */
      --color-primary: #5AA8C0;
      --color-primary-rgb: 90, 168, 192;
      --color-secondary: #8DD4D4;
      --color-secondary-rgb: 141, 212, 212;

      --hero-overlay: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.6), rgba(0,0,0,0.5));
    }
  }
}

/* --------------------------------------------------------------------------
   Base Typography & Scroll Behavior
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
  }

  /* Headings — fluid type via clamp() custom properties */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-5xl); line-height: 1.1; }
  h2 { font-size: var(--text-4xl); line-height: 1.15; }
  h3 { font-size: var(--text-3xl); line-height: 1.2; }
  h4 { font-size: var(--text-2xl); line-height: 1.25; }
  h5 { font-size: var(--text-xl); line-height: 1.3; }
  h6 { font-size: var(--text-lg); line-height: 1.35; }

  p {
    margin-bottom: var(--space-4);
    max-width: 75ch;
    text-wrap: pretty;
  }

  /* Links with CSS Nesting */
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-secondary);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: 2px;
    }
  }
}

/* --------------------------------------------------------------------------
   Container & Layout Utilities
   -------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-5);
    /* Enable container queries on main wrappers */
    container-type: inline-size;
    container-name: main;
  }

  .container--narrow {
    max-width: var(--container-narrow);
    container-name: narrow;
  }

  .container--wide {
    max-width: var(--container-wide);
    container-name: wide;
  }

  /* --------------------------------------------------------------------------
     Section Spacing — using CSS Nesting
     -------------------------------------------------------------------------- */
  .section {
    padding-block: var(--space-12);
    container-type: inline-size;
    container-name: section;

    &--sm {
      padding-block: var(--space-8);
    }

    &--lg {
      padding-block: var(--space-16);
    }

    &--alt {
      background-color: var(--color-bg-alt);
    }

    &--dark {
      background-color: var(--color-bg-dark);
      color: var(--color-text-inverse);

      & h1, & h2, & h3, & h4 {
        color: var(--color-text-inverse);
      }
    }
  }

  /* --------------------------------------------------------------------------
     Grid System — gap-based spacing (no margins)
     -------------------------------------------------------------------------- */
  .grid {
    display: grid;
    gap: var(--space-6);
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Container query responsive grids — respond to parent container, not viewport */
  @container (max-width: 900px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }

  @container (max-width: 600px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
  }

  /* Fallback for browsers without container query support */
  @supports not (container-type: inline-size) {
    @media (max-width: 1024px) {
      .grid--4 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .grid--2,
      .grid--3,
      .grid--4 { grid-template-columns: 1fr; }
    }
  }

  /* Flex utilities — gap-based, no margins */
  .flex {
    display: flex;
    &--center { align-items: center; justify-content: center; }
    &--between { align-items: center; justify-content: space-between; }
    &--column { flex-direction: column; }
    &--wrap { flex-wrap: wrap; }
    &--gap-sm { gap: var(--space-3); }
    &--gap { gap: var(--space-5); }
    &--gap-lg { gap: var(--space-8); }
  }

  /* --------------------------------------------------------------------------
     Responsive Images
     -------------------------------------------------------------------------- */
  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .img-rounded {
    border-radius: var(--radius-md);
  }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  /* Screen Reader Only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  /* Skip Navigation */
  .skip-nav {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 10000;
    transition: top var(--transition-fast);

    &:focus {
      top: 0;
    }
  }

  /* Text Utilities */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }
  .text-sm { font-size: var(--text-sm); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-light { color: var(--color-text-light); }
  .text-primary { color: var(--color-primary); }
  .text-accent { color: var(--color-accent); }
  .font-heading { font-family: var(--font-heading); }
  .font-bold { font-weight: var(--font-weight-bold); }
  .font-semibold { font-weight: var(--font-weight-semibold); }

  /* Spacing Utilities — gap-first approach, margins as fallback */
  .mb-0 { margin-bottom: 0; }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-8 { margin-top: var(--space-8); }
  .gap-2 { gap: var(--space-2); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }

  /* Responsive Visibility */
  @media (max-width: 768px) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 769px) {
    .hide-desktop { display: none !important; }
  }
}

/* --------------------------------------------------------------------------
   Note: Responsive typography is now handled by clamp() in custom properties
   above, so explicit media query overrides for h1-h4 are no longer needed.
   The fluid type scale automatically adjusts between mobile and desktop.
   -------------------------------------------------------------------------- */