/* ============================================================================
   base.css — Semantic aliases + compatibility bridge
   Maps framework.css tokens to component-friendly aliases
   ============================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Color primitives needed by framework.css ── */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ── Site layout ── */
  --header-height: 140px;         /* top-bar (~48px) + navbar logo 75px + padding (~24px) = ~147px, using 140px */
  --header-height-scrolled: 100px;
  --container-max-width: 1280px;
  --container-padding: var(--space-6);
  --grid-gutter: var(--space-6);

  /* ── Color aliases (used by components.css which was built before tokens.css) ── */
  --color-bg: var(--light-bg);
  --color-bg-rgb: 249, 250, 251;  /* MUST be R,G,B for rgba() usage */
  --color-bg-surface: #ffffff;
  --color-bg-secondary: var(--secondary-50, #f9fafb);
  --color-bg-overlay: rgba(0,0,0,0.5);
  --color-text: var(--heading-light);
  --color-text-secondary: var(--secondary-600);
  --color-text-muted: var(--secondary-400);
  --color-text-link: var(--primary-600);
  --color-text-link-hover: var(--primary-800);
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: #ffffff;
  --color-border: var(--border-base);
  --color-primary: var(--primary-500);
  --color-primary-dark: var(--primary-700);
  --color-primary-light: var(--primary-100);
  --color-secondary: var(--secondary-500);
  --color-secondary-dark: var(--secondary-700);
  --color-secondary-light: var(--secondary-100);
  --color-accent: var(--accent-500);
  --color-success: #16a34a;
  --color-neutral-100: var(--gray-100);
  --color-neutral-300: var(--gray-300);
  --color-neutral-700: var(--gray-700);
  --color-neutral-900: var(--gray-900);
  --color-focus-ring: var(--primary-500);

  /* ── Section padding ── */
  --section-padding-y: var(--space-20);
  --section-padding-x: 0;

  /* ── Component tokens ── */
  --btn-radius: var(--radius-lg);
  --btn-padding-y: var(--space-3);
  --btn-padding-x: var(--space-6);
  --btn-sm-padding-y: var(--space-2);
  --btn-sm-padding-x: var(--space-4);
  --btn-lg-padding-y: var(--space-4);
  --btn-lg-padding-x: var(--space-8);
  --btn-font-weight: var(--weight-semibold);
  --btn-font-size: var(--text-base);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-bg: #ffffff;
  --card-border: 1px solid var(--secondary-100);
  --badge-radius: var(--radius-full);
  --badge-padding-y: var(--space-1);
  --badge-padding-x: var(--space-3);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--weight-semibold);
  --input-height: var(--space-12);
  --input-padding-x: var(--space-4);
  --input-border: 1px solid var(--secondary-300);
  --input-radius: var(--radius-md);
  --input-bg: #ffffff;
  --input-focus-ring: 0 0 0 3px rgba(59,130,246,0.2);

  /* ── Decorative ── */
  --accent-line-width: 60px;
  --accent-line-height: 4px;
  --accent-line-color: var(--accent-500);
  --accent-line-radius: var(--radius-full);
  --img-radius: var(--radius-xl);
  --img-radius-avatar: 50%;
  --divider-height: 4px;
  --divider-color: var(--primary-500);
  --divider-accent-color: var(--accent-500);
  --blob-size: 500px;
  --blob-opacity: 0.08;
  --blob-color-1: var(--primary-400);
  --blob-color-2: var(--accent-400);

  /* ── Legacy font size aliases used in components.css ── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-accent: 'Montserrat', sans-serif;
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-5xl: var(--text-5xl);
  --font-weight-regular: var(--weight-regular);
  --font-weight-medium: var(--weight-medium);
  --font-weight-semibold: var(--weight-semibold);
  --font-weight-bold: var(--weight-bold);
  --line-height-none: var(--leading-none);
  --line-height-tight: var(--leading-tight);
  --line-height-snug: var(--leading-snug);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);
  --letter-spacing-widest: var(--tracking-widest);
  --transition-fast: var(--duration-150) var(--ease-default);
  --transition-normal: var(--duration-200) var(--ease-default);
  --transition-slow: var(--duration-300) var(--ease-default);
  --shadow-focus-ring: 0 0 0 4px rgba(59,130,246,0.25);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

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

/* Hero sections use calc(var(--header-height) + padding) to account for the fixed header */

@media (max-width: 1024px) {
  body { padding-bottom: 60px; }
}

img, video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0; }
ul,ol { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ── Selection ── */
::selection { background: var(--primary-200); color: var(--primary-900); }

/* ── Typography base ── */
a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-150) var(--ease-default);
}
a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Utility ── */
.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;
}
.text-white { color: #fff; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.d-flex { display: flex; }
.flex-col { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-4 { gap: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-5 { width: 1.25rem; height: 1.25rem; }
.w-6 { width: 1.5rem; height: 1.5rem; }
.w-8 { width: 2rem; height: 2rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }