/**
 * London Theme — Master Stylesheet
 * Imports all partials and defines global CSS custom properties.
 * Style variant overrides (theme-a.css / theme-b.css) are loaded
 * separately via Drupal libraries and override these variables.
 */

/* === BASE === */
@import url('base/reset.css');
@import url('base/typography.css');

/* === LAYOUT === */
@import url('layout/grid.css');

/* === COMPONENTS === */
@import url('components/navbar.css');
@import url('components/hero.css');
@import url('components/cards.css');
@import url('components/buttons.css');
@import url('components/footer.css');

/* =====================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   Style variant files override these at :root.
   ===================================================== */
:root {
  /* Colours */
  --color-primary:    #1c1c1e;
  --color-secondary:  #3a3a3c;
  --color-accent:     #0057ff;
  --color-accent-alt: #d4a017;
  --color-text:       #1c1c1e;
  --color-text-muted: #6e6e73;
  --color-bg:         #ffffff;
  --color-bg-alt:     #f5f5f7;
  --color-border:     #d1d1d6;
  --color-white:      #ffffff;
  --color-black:      #000000;

  /* Typography */
  --font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */

  --line-height-tight:  1.25;
  --line-height-base:   1.6;
  --line-height-loose:  1.8;

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* Spacing */
  --spacing-xs:   0.25rem;   /*  4px */
  --spacing-sm:   0.5rem;    /*  8px */
  --spacing-md:   1rem;      /* 16px */
  --spacing-lg:   1.5rem;    /* 24px */
  --spacing-xl:   2rem;      /* 32px */
  --spacing-2xl:  3rem;      /* 48px */
  --spacing-3xl:  4rem;      /* 64px */
  --spacing-4xl:  6rem;      /* 96px */

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --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.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --container-max:     1280px;
  --container-padding: var(--spacing-lg);
  --header-height:     72px;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Section spacing */
.section {
  padding-block: var(--spacing-3xl);
}

.section--sm {
  padding-block: var(--spacing-2xl);
}

.section--lg {
  padding-block: var(--spacing-4xl);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

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

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

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

/* Flex */
.flex            { display: flex; }
.flex--center    { align-items: center; }
.flex--between   { justify-content: space-between; }
.flex--wrap      { flex-wrap: wrap; }
.flex--gap-sm    { gap: var(--spacing-sm); }
.flex--gap-md    { gap: var(--spacing-md); }
.flex--gap-lg    { gap: var(--spacing-lg); }

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  z-index: 9999;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--spacing-md);
}