/* Design tokens extracted from Figma — Optimus Software redesign */

:root {
  /* ---------- Colors ---------- */

  /* Primary brand */
  --color-primary: #004d3c;          /* Dark teal, main brand */
  --color-primary-light: #3e7468;    /* Lighter teal */
  --color-primary-bg: #dce5df;       /* Sage, section backgrounds */

  /* Accent / CTAs */
  --color-cta: #fd8504;              /* Orange, primary CTA */
  --color-cta-hover: #ff6600;        /* Brighter orange on hover */

  /* Highlights (kept from previous brand) */
  --color-accent-green: #9bc034;     /* Lime green */
  --color-accent-green-dark: #51a700;
  --color-accent-green-bright: #ccff00;

  /* Neutrals */
  --color-white: #ffffff;
  --color-off-white: #fcfcfc;
  --color-border: #cccccc;
  --color-border-light: #f3f4f6;
  --color-text: #000000;
  --color-text-muted: #9ca3af;

  /* ---------- Typography ---------- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Sizes (from Figma) */
  --text-eyebrow: 11px;     /* "SEC_00 // WELCOME" labels */
  --text-eyebrow-lg: 12px;
  --text-body-sm: 14px;
  --text-body: 15px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-section-label: 20px;
  --text-h2: 30px;          /* "Quality Without Compromise" */
  --text-h1: 60px;          /* Section titles like "who we are" */
  --text-display: 96px;     /* Hero headline */

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---------- Spacing & layout ---------- */
  --container-max: 1280px;
  --container-padding: 24px;

  /* Section indents matching Figma at 1512px reference width */
  --indent-nav: clamp(16px, 5.29vw, 80px);
  --indent-hero: clamp(20px, 6.42vw, 97px);
  --indent-section: clamp(24px, 9.79vw, 148px);

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

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

  /* ---------- Misc ---------- */
  --border-thin: 1px solid var(--color-border);
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
}

/* ---------- Font imports ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Base reset (scoped to redesign pages) ---------- */
.redesign {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.redesign *,
.redesign *::before,
.redesign *::after {
  box-sizing: border-box;
}

.redesign img {
  max-width: 100%;
  height: auto;
  display: block;
}

.redesign a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Utility classes ---------- */
.redesign .container {
  margin: 0 auto;
  padding: 0 var(--indent-section);
  max-width: 1512px; /* Figma reference frame width */
}

.redesign .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-lg);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-light);
}

.redesign .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.redesign .btn-primary {
  background: var(--color-cta);
  color: var(--color-white);
}

.redesign .btn-primary:hover {
  background: var(--color-cta-hover);
}

.redesign .btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.redesign .btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}