/* Self-hosted fonts (Latin subset) */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var.cd56e2ec63d7.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-var.c501f578bf3f.woff2") format("woff2");
}

:root {
  /* Brand: taken from the Three D Global logo (navy wordmark, royal-blue globe, azure highlight, silver) */
  --navy-950:   #06142B;
  --navy-900:   #0A2652;
  --navy-800:   #0B3473;
  --blue-700:   #0040A0;
  --blue-600:   #0052C8;
  --azure-500:  #0A6FE0;
  --azure-400:  #3B93F2;
  --sky-200:    #D3E4FA;
  --sky-100:    #E8F1FD;
  --sky-50:     #F4F8FE;
  --silver-300: #C3CAD3;

  /* Neutrals and states */
  --ink:       #1C2433;
  --ink-muted: #5A6474;
  --paper:     #FFFFFF;
  --error:     #B3261E;
  --success:   #2E7D5B;

  /* Semantic */
  --bg:            var(--paper);
  --bg-alt:        var(--sky-50);
  --surface:       var(--paper);
  --text:          var(--ink);
  --text-muted:    var(--ink-muted);
  --heading:       var(--ink);
  --accent:        var(--azure-500);
  --link:          var(--blue-700);
  --link-hover:    var(--azure-500);
  --border:        #DDE4EE;
  --rule:          rgba(28, 36, 51, 0.12);
  --btn-bg:        var(--gradient-brand);
  --btn-text:      #FFFFFF;
  --focus-ring:    var(--azure-500);

  --gradient-brand: linear-gradient(90deg, var(--blue-700) 0%, var(--azure-500) 100%);
  --gradient-soft:  radial-gradient(60% 70% at 100% 0%, var(--sky-100) 0%, transparent 70%),
                    radial-gradient(50% 60% at 0% 100%, var(--sky-100) 0%, transparent 70%);
  --overlay-brand:  linear-gradient(90deg, rgba(11, 52, 115, 0.45) 0%, rgba(0, 64, 160, 0.3) 55%, rgba(0, 64, 160, 0.15) 100%);
  --overlay-dark:   linear-gradient(0deg, rgba(6, 20, 43, 0.82), rgba(6, 20, 43, 0.62));

  /* Type */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-display: clamp(1.85rem, 1.9vw + 1rem, 2.75rem);
  --text-h1: clamp(1.7rem, 1.5vw + 1rem, 2.35rem);
  --text-h2: clamp(1.45rem, 1.1vw + 1rem, 1.95rem);
  --text-h3: 1.125rem;
  --text-hero: clamp(2rem, 2.6vw + 1rem, 3rem);            /* page banner titles */
  --text-section: clamp(1.6rem, 1.8vw + 0.8rem, 2.35rem);  /* large section titles */
  --text-lg: 1.0625rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-12: 2.5rem;  --space-16: 3rem;    --space-24: 4.5rem;
  --space-32: 6rem;

  --container: 1240px;  /* content width; section backgrounds still run full-bleed (wider on big monitors, below) */
  --gutter: clamp(1rem, 2.5vw, 1.75rem);
  --section-pad: clamp(2.5rem, 4.5vw, 4.25rem);

  /* Radius */
  --radius-pill: 999px;
  --radius-xl: 20px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 24px 50px -28px rgba(10, 38, 82, 0.28);
  --shadow-float: 0 18px 40px -18px rgba(10, 38, 82, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 240ms;
}

/* Large monitors: let content use more of the width instead of a narrow centre column */
@media (min-width: 1600px) { :root { --container: 1440px; } }

/* Section themes: add one class to a <section> to switch its palette.
   Class names are kept stable because editors pick them for page blocks. */
.theme-bordeaux, .theme-dark, .theme-green, .theme-gradient, .theme-image {
  --text: rgba(255, 255, 255, 0.86); --heading: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.72);
  --link: #FFFFFF; --link-hover: var(--sky-200); --rule: rgba(255, 255, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.06); --accent: #8EC2FF; --focus-ring: #FFFFFF;
}
.theme-bordeaux { --bg: var(--blue-700); }
.theme-green    { --bg: var(--navy-900); }
.theme-dark     { --bg: var(--navy-950); }
.theme-alt      { --bg: var(--sky-50); }
.theme-gradient { --bg: var(--blue-700); }

section[class*="theme-"], footer[class*="theme-"] { background-color: var(--bg); color: var(--text); }
.theme-bordeaux, .theme-gradient {
  background-image:
    radial-gradient(55% 80% at 100% 100%, rgba(10, 111, 224, 0.55) 0%, transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgba(10, 111, 224, 0.35) 0%, transparent 70%);
}
.theme-alt { background-image: var(--gradient-soft); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}