/* ==========================================================================
   REVCENDIA — BASE
   Design tokens, reset, and foundational typography.
   This file is the single source of truth for the visual system.
   Every other stylesheet consumes these custom properties — do not
   hard-code colour, spacing, or type values anywhere else in the codebase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT LOADING
   Self-hosted-ready declarations. If self-hosting fonts, replace the
   @import below with @font-face rules pointing at /assets/fonts/.
   Using font-display: swap via the Google Fonts query string to avoid
   invisible text during load (mitigated further by system-font fallback
   stack below, which is used until the webfont paints).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   Locked colour system. Do not introduce additional hues. Tints/shades
   are derived from these values only, using opacity (rgba) or the
   colour-mix() function so the palette stays provably closed.
   -------------------------------------------------------------------------- */
:root {
  /* Colour — locked palette */
  --color-primary: #071826;      /* deep navy — headings, primary surfaces */
  --color-secondary: #0E2235;    /* secondary navy — gradients, dark panels */
  --color-text: #18212B;         /* body heading / high-emphasis text */
  --color-body: #5F6F82;         /* body copy, secondary text */
  --color-background: #FFFFFF;   /* page background */
  --color-section: #F7F9FB;      /* alternating section background */
  --color-border: #E6EAF0;       /* hairline borders, dividers */
  --color-accent: #2C7EF8;       /* interactive accent — links, CTAs, focus */
  --color-success: #169B62;      /* positive metrics, confirmations */

  /* Derived surfaces (opacity-based — no new hues introduced) */
  --color-primary-04: rgba(7, 24, 38, 0.04);
  --color-primary-08: rgba(7, 24, 38, 0.08);
  --color-primary-60: rgba(7, 24, 38, 0.6);
  --color-primary-85: rgba(7, 24, 38, 0.85);
  --color-accent-08: rgba(44, 126, 248, 0.08);
  --color-accent-12: rgba(44, 126, 248, 0.12);
  --color-accent-24: rgba(44, 126, 248, 0.24);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-12: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — fluid, clamps between mobile and desktop viewports.
     Editorial rhythm: generous leading on body, tight leading on display. */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.58rem + 0.85vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.78rem + 1.1vw, 2.75rem);
  --text-4xl: clamp(2.375rem, 2.05rem + 1.6vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 2.3rem + 2.2vw, 4rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* Spacing scale — 8px base unit, fluid at the larger end for
     section rhythm so whitespace scales deliberately with viewport. */
  --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-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: clamp(4rem, 3.2rem + 4vw, 6rem);     /* 64–96px */
  --space-11: clamp(5rem, 3.6rem + 7vw, 8rem);     /* 80–128px */
  --space-12: clamp(6rem, 4rem + 10vw, 10rem);     /* 96–160px */

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 760px;
  --container-medium: 960px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radius — restrained, quiet geometry */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Elevation — soft, low-contrast shadows only */
  --shadow-sm: 0 1px 2px rgba(7, 24, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(7, 24, 38, 0.08);
  --shadow-lg: 0 12px 40px rgba(7, 24, 38, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-accent-24);

  /* Motion — subtle only, per brand direction */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* --------------------------------------------------------------------------
   3. REDUCED MOTION
   Respected globally. Individual components should not re-implement
   motion outside what this media query can neutralise.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. RESET
   Minimal, modern reset — not a full normalize; only what this system needs.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic; /* readable alt text if image fails to load */
  color: var(--color-body);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: 600; }
h5 { font-size: var(--text-lg); font-weight: 600; }
h6 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

p {
  max-width: 68ch; /* readable line length by default */
}

p + p {
  margin-top: var(--space-4);
}

strong {
  font-weight: 600;
  color: var(--color-text);
}

small {
  font-size: var(--text-sm);
}

/* Links within running copy get an underline for clarity;
   component-level links (nav, cards, buttons) override this. */
.text-link {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-24);
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

.text-link:hover {
  text-decoration-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY BASELINE
   -------------------------------------------------------------------------- */

/* Visible focus state for every interactive element, keyboard-only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove default focus ring only when focus-visible is supported and unmatched */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-primary);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Visually-hidden utility for screen-reader-only content */
.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;
}

::selection {
  background-color: var(--color-accent-24);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   7. SCROLLBAR (progressive enhancement — quiet, not decorative)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-background);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    border: 3px solid var(--color-background);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-body);
  }
}