/*
 * Impact Outsourcing — Brand Tokens (CSS custom properties)
 *
 * Generated from brand/tokens.json. Do not edit by hand without also
 * updating tokens.json and tokens.md so the three stay in sync.
 */

:root {
  /* Colour ---------------------------------------------------------- */
  --color-bg:          #0B1220;
  --color-surface:     #121A2B;
  --color-surface-2:   #1A2336;
  --color-line:        rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.16);
  --color-text:        #E8ECF3;
  --color-muted:       #9AA3B2;
  --color-accent:      #F5C542;
  --color-accent-ink:  #0B1220;
  --color-link:        #7DB9FF;
  --color-paper:       #F5EFE6;
  --color-paper-ink:   #141822;
  --color-paper-muted: #5B6474;
  --color-success:     #4ADE80;
  --color-warn:        #F59E0B;
  --color-danger:      #EF4444;

  /* Radius ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Shadow (minimal — coloured glow only on the primary CTA) -------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.32);
  --shadow-cta-rest:  0 0 0 0 rgba(245, 197, 66, 0);
  --shadow-cta-hover: 0 8px 28px rgba(245, 197, 66, 0.18);

  /* Typography ------------------------------------------------------ */
  --font-display: "Fraunces", "Source Serif Pro", Georgia, serif;
  --font-text:    "Inter", "Söhne", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;
  --step-5:  3rem;
  --step-6:  4rem;

  --lh-tight: 1.15;
  --lh-lead:  1.65;

  --tracking-display: -0.015em;
  --tracking-text:    -0.003em;
  --tracking-eyebrow: 0.12em;

  /* Spacing --------------------------------------------------------- */
  --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;
  --space-10: 128px;

  /* Layout ---------------------------------------------------------- */
  --container:         1240px;
  --container-narrow:  880px;
  --gutter-desktop:    32px;
  --gutter-mobile:     16px;
  --nav-height-desktop: 80px;
  --nav-height-mobile:  64px;

  /* Motion ---------------------------------------------------------- */
  --motion-duration-1: 120ms;
  --motion-duration-2: 240ms;
  --motion-duration-3: 400ms;
  --motion-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-reveal-translate: 8px;

  /* Breakpoints (for reference — media queries still use literals) -- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1240px;
}

/* Paper theme — applied to sections that flip to the light cream
 * surface (e.g. the social-impact body). Apply via
 * <section class="paper"> rather than a media query. */
.paper {
  --color-bg:    var(--color-paper);
  --color-text:  var(--color-paper-ink);
  --color-muted: var(--color-paper-muted);
  --color-line:  rgba(20, 24, 34, 0.08);
  --color-line-strong: rgba(20, 24, 34, 0.16);
  background: var(--color-paper);
  color: var(--color-paper-ink);
}

/* Reduced-motion override. Every transition/animation the theme
 * declares should use --motion-duration-* so this single rule can
 * flatten them all. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-1: 0ms;
    --motion-duration-2: 0ms;
    --motion-duration-3: 0ms;
    --motion-reveal-translate: 0px;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}