/* =============================================================================
   VISOLT — DESIGN SYSTEM
   The foundational tokens for every component on the site.
   These values are locked from the brand guidelines.
   ============================================================================= */

:root {
  /* ---- Brand colour palette ---- */
  --mink:        #877068;   /* Primary brand colour — used for hero slabs, CTAs */
  --deep-mink:   #6E5C54;   /* Tagline, formal lockup contexts */
  --light-mink:  #9F8B83;   /* Secondary, used in mink-on-mink contexts */
  --cream:       #E8DFDA;   /* Brand cream — used on mink slabs for body text */

  /* ---- Working colours ---- */
  --white:       #FFFFFF;
  --off-white:   #FAFAFA;   /* Quieter alternative to white for section variation */
  --dark:        #222222;   /* Body headlines, primary text on white */
  --body:        #444444;   /* Body paragraph text */
  --grey:        #888888;   /* Eyebrows, secondary labels, metadata */
  --divider:     #E5E5E5;   /* Hairline dividers, card borders */

  /* ---- Typography stacks ---- */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* ---- Type scale (desktop) ---- */
  /* Locked in brand guidelines: 80/64/40/28/22/18/15/11 */
  --type-display:        64px;   /* Hero headlines — sized for reliability across viewports */
  --type-display-mid:    56px;   /* Smaller hero headlines (very long content) */
  --type-section:        52px;   /* Section headings */
  --type-sub-section:    32px;   /* Sub-section headings */
  --type-card-heading:   24px;   /* Card and small block headings */
  --type-lead:           18px;   /* Lead paragraphs and sub-lines */
  --type-body:           15px;   /* Body text */
  --type-small:          14px;   /* Small body, CTAs */
  --type-eyebrow:        13px;   /* Eyebrows, label small caps */

  /* ---- Type scale (mobile) ---- */
  /* These take effect at the mobile breakpoint via media queries */
  --type-display-mob:        44px;
  --type-display-inner-mob:  36px;
  --type-section-mob:        28px;
  --type-sub-section-mob:    20px;
  --type-card-heading-mob:   18px;
  --type-lead-mob:           16px;
  --type-body-mob:           14px;
  --type-small-mob:          13px;
  --type-eyebrow-mob:        10px;

  /* ---- Letter spacing ---- */
  --tracking-eyebrow:  0.16em;   /* Eyebrows: tight tracking for small caps feel */
  --tracking-logo:     0.20em;   /* VISOLT wordmark */
  --tracking-coverage: 0.08em;   /* Sector coverage labels */

  /* ---- Line heights ---- */
  --leading-tight:    1.05;     /* Display and section headlines */
  --leading-snug:     1.25;     /* Card headings, sub-sections */
  --leading-normal:   1.55;     /* Body paragraphs */
  --leading-relaxed:  1.75;     /* Long-form reading text */

  /* ---- Font weights ---- */
  --weight-light:    300;       /* Sub-lines on hero, body on mink slabs */
  --weight-regular:  400;       /* Default body weight */
  --weight-medium:   500;       /* Headlines, CTAs */
  --weight-semibold: 600;       /* Active nav state */

  /* ---- Layout grid (desktop) ---- */
  --max-content-width: 1440px;
  --outer-padding:     80px;
  --gutter:            24px;

  /* ---- Layout grid (mobile) ---- */
  --outer-padding-mob: 24px;

  /* ---- Spacing scale ---- */
  /* Used for vertical rhythm between sections, padding inside cards, etc */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   60px;
  --space-2xl:  80px;
  --space-3xl:  120px;

  /* ---- Section heights ---- */
  --hero-home-desktop:    900px;
  --hero-inner-desktop:   700px;
  --hero-home-mobile:     720px;
  --hero-inner-mobile:    540px;

  /* ---- Transitions ---- */
  /* Restraint applies to motion too — slow easing, never bouncy */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-quick:  150ms;     /* Hovers, small state changes */
  --duration-normal: 250ms;     /* Sector expand, menu open */
  --duration-slow:   400ms;     /* Page transitions if needed */

  /* ---- Z-index scale ---- */
  --z-nav:         100;
  --z-mobile-menu: 200;
  --z-overlay:     300;
}

/* =============================================================================
   FONT LOADING
   Self-hosted woff2 files — privacy-friendly, no Google Fonts CDN
   Files in /fonts/ directory
   ============================================================================= */

/* Source Serif 4 — display font */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Inter — UI and body font */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   RESET & BASE
   Minimal, opinionated reset — not a heavyweight framework
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--body);
  background: var(--white);
}

/* Headings — default to serif, medium weight, tight leading */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--dark);
}

p {
  margin: 0;
}

/* Links — minimal default styling, components add their own treatments */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-quick) var(--ease-default);
}

a:hover {
  opacity: 0.7;
}

/* Images don't overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lists — remove default styling; components use their own when needed */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Buttons — neutralise browser defaults */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* =============================================================================
   ACCESSIBILITY
   Focus states, screen reader utilities
   ============================================================================= */

/* Visible focus on keyboard navigation only */
:focus-visible {
  outline: 2px solid var(--mink);
  outline-offset: 4px;
}

/* Hide content visually but keep available to screen readers */
.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;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}