/* ===========================
   Layered CSS: base → tokens → components → utilities
   =========================== */
@layer base, tokens, components, utilities;

/* ===========================
   BASE (global resets & typography)
   =========================== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
  }

  /* Your existing responsive base size */
  html { font-size: 15px; }
  @media (min-width: 768px) {
    html { font-size: 17px; }
  }

  body {
    margin: 0;
    min-height: 100vh;
    background-color: #3b1833;
    background-image:
      linear-gradient(135deg, rgba(95, 37, 79, 0.55) 0%, rgba(42, 15, 38, 0.6) 100%),
      url('/images/Website-Background.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed;
    color: #fff; /* Site default text color over dark bg */
  }

  /* Fluid global heading scale (Arial) */
  h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 0 0 0.5em; }
  h2 { font-size: var(--fs-h2); line-height: 1.2;  margin: 0 0 0.6em; }
  h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 0 0 0.6em; }
  h4 { font-size: var(--fs-h4); line-height: 1.3;  margin: 0 0 0.6em; }
  h5 { font-size: var(--fs-h5); line-height: 1.35; margin: 0 0 0.6em; }
  h6 { font-size: var(--fs-h6); line-height: 1.4;  margin: 0 0 0.6em; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  :focus { outline: none; }
}

/* ===========================
   TOKENS (global semantic variables)
   =========================== */
@layer tokens {
  :root {
    /* Typography scale (tuned for Arial, base ~16px on larger screens) */
    --fs-h1: clamp(2rem, 1.2rem + 2.5vw, 3rem);
    --fs-h2: clamp(1.75rem, 1.1rem + 1.8vw, 2.4rem);
    --fs-h3: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    --fs-h4: clamp(1.25rem, 0.95rem + 0.8vw, 1.5rem);
    --fs-h5: clamp(1.125rem, 0.95rem + 0.4vw, 1.25rem);
    --fs-h6: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);

    /* Semantic color tokens (site-wide) */
    --color-text: #2f1b38;         /* Used inside light surfaces/cards */
    --color-text-hero: #ffffff;    /* For hero headers over dark bg */
    --color-surface: rgba(255, 255, 255, 0.96);
    --color-surface-alt: #ffffff;
    --color-border: rgba(69, 28, 74, 0.2);
    --color-focus: rgba(245, 200, 0, 0.22);

    /* Brand accents & gradients */
    --color-accent-1: #f5c800;
    --color-accent-2: #ff9f1c;
    --gradient-accent: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);

    /* Feedback surfaces */
    --color-success-bg: rgba(51, 209, 128, 0.18);
    --color-success-border: rgba(51, 209, 128, 0.35);
    --color-success-text: #000000;

    --color-warning-bg: rgba(245, 200, 0, 0.14);
    --color-warning-border: rgba(245, 200, 0, 0.32);
    --color-warning-text: #3a221f;

    --color-info-bg: #f7f1fb;
    --color-info-border: rgba(76, 35, 89, 0.18);
    --color-info-text: rgba(47, 27, 56, 0.8);

    /* Radii, shadows, misc */
    --radius-card: 1.75rem;
    --radius-pill: 999px;
    --radius-banner: 1.1rem;

    --shadow-card: 0 28px 70px -32px rgba(10, 2, 12, 0.6);
    --shadow-cta: 0 16px 28px -18px rgba(245, 200, 0, 0.7);
    --shadow-cta-sm: 0 12px 24px -16px rgba(245, 200, 0, 0.6);
    --shadow-success: 0 18px 36px -28px rgba(10, 2, 12, 0.85);

    --focus-ring: 0 0 0 4px var(--color-focus);
    --field-gap: 0.65rem;
  }
}

/* ===========================
   COMPONENTS (site shell)
   =========================== */
@layer components {
  /* Your existing Bootstrap-ish focus ring */
  .btn:focus,
  .btn:active:focus,
  .btn-link.nav-link:focus,
  .form-control:focus,
  .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  }

  html { position: relative; min-height: 100%; }

  .site-header { padding: 1.5rem 0 0.5rem; }

  .site-header-content {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; color: #fff;
  }

  .site-brand {
    font-size: 1.25rem; font-weight: 600; color: #fff; text-decoration: none;
  }
  .site-brand:hover,
  .site-brand:focus { color: #f5c800; }

  .site-tagline { font-size: 0.9rem; opacity: 0.8; }

  .main-container { padding: 2rem 1rem 5rem; }
  .main-content  { width: 100%; }

  .site-footer {
    position: fixed; inset-block-end: 0; inset-inline: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(90deg, rgba(95, 37, 79, 0.7) 0%, rgba(42, 15, 38, 0.7) 100%);
    color: #fff;
  }
  .site-footer a { color: #f5c800; }
  .site-footer a:hover,
  .site-footer a:focus { color: #fff3a0; }

  .site-footer .footer-content {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem; width: 100%;
  }
}

/* ===========================
   UTILITIES (placeholder)
   =========================== */
@layer utilities {
  /* e.g., .u-mx-auto { margin-inline: auto; } */
}