@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---- tokens/fonts.css ---- */
/* Staging Executives webfonts.
   SUBSTITUTION NOTICE: the live stagingexecs.com site is built on GoDaddy Website
   Builder and its theme fonts were not recoverable. These three Google families were
   chosen to match the logo's geometry and the brand's institutional/technical register.
   Swap the families here if the real brand fonts are supplied. */


/* ---- tokens/colors.css ---- */
:root {
  /* ---- Brand base scales ---------------------------------------------- */
  /* Navy: taken from the site's theme-color #080338 (deep indigo-navy). */
  --navy-950: #050126;
  --navy-900: #080338;
  --navy-800: #0e0a4e;
  --navy-700: #171166;
  --navy-600: #241c82;
  --navy-500: #3a2fa0;
  --navy-400: #6c63c0;
  --navy-300: #a9a3dc;
  --navy-200: #d5d2ee;
  --navy-100: #ecebf8;

  /* Orange: sampled from the logo mark (#f87818 / #ff8810 dominant). */
  --orange-800: #8f3d04;
  --orange-700: #b44e06;
  --orange-600: #d96410;
  --orange-500: #f97c16;
  --orange-400: #ff9a2e;
  --orange-300: #ffb765;
  --orange-200: #ffd9ac;
  --orange-100: #fff0de;

  /* Warm-leaning neutrals */
  --neutral-950: #101014;
  --neutral-900: #1c1b22;
  --neutral-700: #45434f;
  --neutral-500: #6e6b7a;
  --neutral-400: #8e8b99;
  --neutral-300: #c9c7d1;
  --neutral-200: #e4e2e9;
  --neutral-100: #f2f1f5;
  --neutral-50:  #fafafb;
  --white: #ffffff;

  /* Status — used sparingly; navy/orange carry the brand. */
  --status-success: #1f7a4d;
  --status-warning: #b45309;
  --status-error:   #b3261e;
  --status-info:    var(--navy-600);

  /* ---- Semantic aliases ------------------------------------------------ */
  --surface-page:     var(--white);
  --surface-muted:    var(--neutral-100);
  --surface-card:     var(--white);
  --surface-inverse:  var(--navy-900);
  --surface-inverse-2:var(--navy-800);
  --surface-accent:   var(--orange-500);
  --surface-accent-soft: var(--orange-100);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-accent:    var(--orange-700);      /* 5.4:1 on white — use this, not orange-500, for type */
  --text-on-dark:   var(--white);
  --text-on-dark-muted: var(--navy-200);
  --text-on-accent: var(--navy-950);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --border-accent: var(--orange-500);

  --link-rest:  var(--navy-600);
  --link-hover: var(--orange-700);
  --link-on-dark: var(--orange-400);

  --focus-ring: var(--orange-500);
}

/* ---- tokens/typography.css ---- */
:root {
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Type scale — display sizes are fluid for web, fixed for print/slides. */
  --size-display-1: clamp(40px, 5.2vw, 68px);
  --size-display-2: clamp(32px, 3.8vw, 48px);
  --size-h1: 40px;
  --size-h2: 30px;
  --size-h3: 23px;
  --size-h4: 19px;
  --size-lead: 21px;
  --size-body: 17px;
  --size-body-sm: 15px;
  --size-caption: 13px;
  --size-eyebrow: 12px;

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;
  --tracking-wordmark: 0.06em;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  --gutter: var(--space-6);
  --section-y: var(--space-20);
  --section-y-lg: var(--space-30);
  --container-max: 1180px;
  --measure: 68ch;      /* max line length for body copy */
  --measure-narrow: 46ch;
}

/* ---- tokens/borders.css ---- */
:root {
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* The signature rule: every section heading on the site is followed by a short
     horizontal rule. Codified here. */
  --rule-height: 4px;
  --rule-width: 64px;
  --rule-color: var(--orange-500);
}

/* ---- tokens/elevation.css ---- */
:root {
  --shadow-xs: 0 1px 2px rgba(8, 3, 56, 0.08);
  --shadow-sm: 0 2px 6px rgba(8, 3, 56, 0.08);
  --shadow-md: 0 6px 20px rgba(8, 3, 56, 0.10);
  --shadow-lg: 0 18px 48px rgba(8, 3, 56, 0.16);
  --shadow-focus: 0 0 0 3px rgba(249, 124, 22, 0.45);
  --overlay-scrim: rgba(5, 1, 38, 0.62);
}

/* ---- tokens/motion.css ---- */
:root {
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all var(--duration-base) var(--ease-standard);
}

/* ---- tokens/base.css ---- */
/* Minimal element defaults so specimen cards, kits and slides start consistent. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--link-rest); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); }
*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--orange-200); color: var(--navy-900); }