/* ==========================================================================
   SyncXpress — base.css
   Design tokens, reset and typography.

   Light theme. Colour is expressed as semantic tokens (--bg, --surface,
   --text, --accent …) built on top of the raw brand ramps, so a component
   rule never hard-codes a colour and the whole palette can be retuned here.

   No external resources: system font stack only, so the site renders
   identically online and when opened directly from a local folder.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand ramps
   -------------------------------------------------------------------------- */
:root {
  /* Navy */
  --navy-50:  #eef2f8;
  --navy-100: #d6e0ee;
  --navy-200: #aebfd9;
  --navy-300: #7e97c0;
  --navy-400: #5273a3;
  --navy-500: #345787;
  --navy-600: #24426b;
  --navy-700: #1a3256;
  --navy-800: #142745;
  --navy-900: #0d1a30;
  --navy-950: #070f1f;

  /* Teal — the brand cyan, deepened so it passes contrast on light ground */
  --teal-50:  #eafbfb;
  --teal-100: #ccf6f6;
  --teal-200: #99ecec;
  --teal-300: #5fdddd;
  --teal-400: #2bc4c4;
  --teal-500: #14a3a3;
  --teal-600: #0d8585;
  --teal-700: #0c6a6a;
  --teal-800: #0a5555;

  --amber-600: #b45309;
  --green-600: #047857;
  --red-600:   #b91c1c;
}

/* --------------------------------------------------------------------------
   2. Semantic tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:            #f6f8fc;
  --bg-alt:        #eef2f8;
  --surface:       #ffffff;
  --surface-sunken:#f0f4fa;
  --surface-inset: #f8fafd;

  /* Lines */
  --border:        #dfe6f0;
  --border-strong: #cbd6e6;
  --border-hi:     rgba(13, 133, 133, 0.45);

  /* Text — all four pass WCAG AA on BOTH --bg and the tinted --bg-alt used
     by the footer and alternating sections, which is the tighter constraint. */
  --text:       #0b1729;
  --text-mute:  #3a4a63;
  --text-dim:   #4b5a72;
  --text-faint: #5f6b7d;
  --text-on-accent: #ffffff;

  /* Accent */
  --accent:            var(--teal-700);
  --accent-hover:      var(--teal-800);
  --accent-bright:     var(--teal-500);
  --accent-soft:       rgba(13, 133, 133, 0.10);
  --accent-soft-hover: rgba(13, 133, 133, 0.17);
  --accent-border:     rgba(13, 133, 133, 0.28);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono",
               Consolas, "Liberation Mono", Menlo, monospace;

  /* Fluid type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.0625rem;
  --fs-xl:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --fs-h3:   clamp(1.125rem, 0.5vw + 1rem, 1.3rem);
  --fs-h2:   clamp(1.65rem, 1.9vw + 1.1rem, 2.5rem);
  --fs-h1:   clamp(2.1rem, 3.4vw + 1.15rem, 3.6rem);
  --fs-hero: clamp(2.3rem, 4.2vw + 1.1rem, 4.15rem);

  /* Spacing scale (8px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-full: 999px;

  /* Elevation — neutral and restrained, so cards read as paper */
  --shadow-sm: 0 1px 2px rgba(15, 32, 58, 0.06);
  --shadow-md: 0 10px 28px -12px rgba(15, 32, 58, 0.20);
  --shadow-lg: 0 28px 60px -28px rgba(15, 32, 58, 0.30);
  --glow:      0 8px 22px -6px rgba(12, 106, 106, 0.38);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);
  --dur: 320ms;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-mute);
  background-color: var(--bg);
  background-image:
    radial-gradient(58rem 38rem at 80% -10%, rgba(43, 196, 196, 0.13), transparent 62%),
    radial-gradient(46rem 32rem at 2% 2%, rgba(52, 115, 163, 0.09), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button { cursor: pointer; }

ul, ol { padding: 0; list-style: none; }

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

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

::selection {
  background: rgba(13, 133, 133, 0.20);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-base); letter-spacing: -0.008em; }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent-hover); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

/* --------------------------------------------------------------------------
   5. Accessibility helpers
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 650;
  box-shadow: var(--shadow-md);
  transition: top 180ms var(--ease);
}

.skip-link:focus {
  top: var(--sp-4);
  color: var(--text-on-accent);
}

/* Icon sprite host — never rendered */
.sprite { display: none; }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .notice-bar, .hero-figure, .btn { display: none !important; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}