/* ==========================================================================
   SwornGlobal — Design Tokens
   Source: SWO Brand Style Guidelines v1.0 (Dec 2025) via the SwornGlobal
   design system (claude.ai/design project 8e7480c5). Deep blue-charcoal +
   steel blue = authority, reliability, professionalism.
   ========================================================================== */

/* ---------- Webfonts: DM Sans (headings) + Open Sans (body) ------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..900;1,9..40,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  /* ---- Base palette ---- */
  --swo-navy: #1a2633;        /* PRIMARY — deep blue-charcoal (logo dark) */
  --swo-blue: #4a8faf;        /* ACCENT 1 — steel blue (interactive) */
  --swo-steel: #d6dadf;       /* ACCENT 2 — light steel grey-blue */
  --swo-ink: #071023;         /* near-black navy — darkest text */
  --swo-mist: #f5f7fa;        /* BACKGROUND — cool off-white */
  --swo-white: #ffffff;
  --swo-teal-deep: #00303f;   /* legacy; inverted-logo backgrounds only */

  /* ---- Neutrals ---- */
  --swo-grey-700: #6a6a6a;
  --swo-grey-600: #777777;
  --swo-grey-400: #cccccc;
  --swo-grey-300: #d6dadf;
  --swo-grey-200: #e5e8ec;
  --swo-grey-100: #eff1f4;

  /* ---- Tints & shades ---- */
  --swo-blue-hover: #3f7d9a;
  --swo-blue-soft: #74a9c2;
  --swo-blue-wash: #e8f0f5;
  --swo-navy-raise: #2a3745;

  /* ---- Functional (sparingly) ---- */
  --swo-success: #4ea037;
  --swo-error: #d03c3c;
  --swo-warning: #dcae1e;

  /* ---- Semantic aliases ---- */
  --text-heading: var(--swo-navy);
  --text-body: #3d4a58;
  --text-secondary: var(--swo-grey-600);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b9c4ce;
  --text-on-dark-link: #dbe2e8;
  --text-link: var(--swo-blue);
  --text-link-hover: var(--swo-blue-hover);

  --surface-page: var(--swo-mist);
  --surface-card: var(--swo-white);
  --surface-dark: var(--swo-navy);
  --surface-accent: var(--swo-blue);
  --surface-tint: var(--swo-blue-wash);

  --border-default: var(--swo-grey-300);
  --border-strong: var(--swo-grey-400);
  --border-focus: var(--swo-blue);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* ---- Typography ---- */
  --font-heading: "DM Sans", Arial, sans-serif;
  --font-body: "Open Sans", Arial, sans-serif;
  --font-system: Arial, Helvetica, sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --type-legal: 10px;
  --type-body-sm: 14px;
  --type-body: 16px;
  --type-eyebrow: 16px;
  --type-descriptor: 18px;
  --type-subtitle: 18px;
  --type-headline-2: 24px;
  --type-headline: 34px;
  --type-button: 14px;

  --leading-headline: 1.05;
  --leading-subtitle: 1.1;
  --leading-body: 1.25;
  --leading-relaxed: 1.5;

  --tracking-caps: 0.05em;

  /* ---- Spacing / layout (8px grid) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --container-max: 1160px;
  --container-pad: 24px;

  /* ---- Elevation + motion ---- */
  --shadow-card: 0 2px 8px rgba(7, 16, 35, 0.06), 0 8px 24px rgba(7, 16, 35, 0.07);
  --shadow-raised: 0 4px 12px rgba(7, 16, 35, 0.1), 0 16px 40px rgba(7, 16, 35, 0.12);
  --shadow-focus: 0 0 0 3px rgba(74, 143, 175, 0.35);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ---------- Base element styles ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: var(--leading-headline);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

::selection { background: rgba(74, 143, 175, 0.25); }

img { max-width: 100%; }