/* OctosX Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Surface ──────────────────────────── */
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    #F7FAFC;
  --color-bg-section:   #F0F4F8;
  --color-bg-dark:      #0A1F3A;
  --color-bg-darker:    #050E1F;

  /* ─── Brand ────────────────────────────── */
  --color-brand-primary:       #0A2540;
  --color-brand-primary-hover: #14304D;
  --color-brand-secondary:     #2D3748;

  /* ─── Accent (sparingly) ───────────────── */
  --color-accent:       #F59E0B;
  --color-accent-soft:  #FEF3C7;
  --color-accent-hover: #D97706;

  /* ─── Status ───────────────────────────── */
  --color-success: #10B981;
  --color-info:    #3182CE;
  --color-danger:  #DC2626;

  /* ─── Text ─────────────────────────────── */
  --color-text-primary:       #1A202C;
  --color-text-secondary:     #4A5568;
  --color-text-tertiary:      #718096;
  --color-text-on-dark:       #F7FAFC;
  --color-text-on-dark-muted: #A0AEC0;

  /* ─── Lines ─────────────────────────────── */
  --color-divider:      #E2E8F0;
  --color-divider-dark: #1F3553;

  /* ─── Typography ────────────────────────── */
  --font-heading: 'IBM Plex Sans', 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.875rem;   /* 14px */
  --text-sm:   1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  4.5rem;     /* 72px */

  /* ─── Spacing (4px grid) ─────────────────── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ─── Layout ────────────────────────────── */
  --max-width:       1280px;
  --gutter:          2rem;
  --section-py-lg:   6rem;
  --section-py-md:   4rem;
  --section-py-sm:   3rem;

  /* ─── Radius ─────────────────────────────── */
  --radius-sm:  0.375rem;  /* 6px  */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */

  /* ─── Shadows ────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);

  /* ─── Transitions ───────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

@media (max-width: 768px) {
  :root {
    --section-py-lg: var(--section-py-sm);
    --section-py-md: var(--section-py-sm);
    --gutter: 1.25rem;
  }
}