/* Optegra — design tokens (fonts, colors, typography, layout, base) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Base palette */
  --op-bg-primary: #07111F;
  --op-bg-secondary: #101B2D;
  --op-surface: #162338;
  --op-surface-2: #1C2C45;

  --op-accent: #2EC5FF;
  --op-accent-2: #6E63FF;
  --op-success: #23C16B;

  --op-text-primary: #FFFFFF;
  --op-text-secondary: #AAB6C5;
  --op-text-tertiary: #6C7A8C;

  --op-border: rgba(255, 255, 255, 0.08);
  --op-border-strong: rgba(255, 255, 255, 0.14);

  --op-accent-soft: rgba(46, 197, 255, 0.12);
  --op-accent-2-soft: rgba(110, 99, 255, 0.14);
  --op-success-soft: rgba(35, 193, 107, 0.14);

  --op-gradient: linear-gradient(120deg, #2EC5FF 0%, #6E63FF 100%);
  --op-gradient-soft: linear-gradient(120deg, rgba(46,197,255,0.16) 0%, rgba(110,99,255,0.16) 100%);
  --op-gradient-text: linear-gradient(120deg, #7DD9FF 0%, #A99DFF 100%);

  /* Typography */
  --op-font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --op-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --op-text-display: 4.5rem;
  --op-text-h1: 3.25rem;
  --op-text-h2: 2.5rem;
  --op-text-h3: 1.75rem;
  --op-text-h4: 1.25rem;
  --op-text-lg: 1.125rem;
  --op-text-base: 1rem;
  --op-text-sm: 0.875rem;
  --op-text-xs: 0.75rem;

  --op-leading-tight: 1.08;
  --op-leading-snug: 1.25;
  --op-leading-normal: 1.5;
  --op-leading-relaxed: 1.65;

  --op-tracking-tight: -0.02em;
  --op-tracking-eyebrow: 0.14em;

  /* Spacing / radius / shadow / motion */
  --op-radius-sm: 8px;
  --op-radius-md: 12px;
  --op-radius-lg: 16px;
  --op-radius-xl: 24px;
  --op-radius-2xl: 32px;
  --op-radius-pill: 999px;

  --op-container: 1200px;
  --op-container-narrow: 820px;
  --op-gutter: 24px;

  --op-shadow-sm: 0 1px 2px rgba(3, 8, 16, 0.4);
  --op-shadow-md: 0 8px 24px rgba(3, 8, 16, 0.35);
  --op-shadow-lg: 0 24px 60px rgba(3, 8, 16, 0.45);
  --op-shadow-glow: 0 0 0 1px rgba(46,197,255,0.25), 0 12px 40px rgba(46,197,255,0.18);

  --op-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --op-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --op-dur-fast: 150ms;
  --op-dur: 260ms;
  --op-dur-slow: 500ms;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--op-font-body);
  font-size: var(--op-text-base);
  line-height: var(--op-leading-normal);
  color: var(--op-text-primary);
  background-color: var(--op-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--op-font-heading);
  font-weight: var(--op-weight-bold, 700);
  line-height: var(--op-leading-tight);
  letter-spacing: var(--op-tracking-tight);
  color: var(--op-text-primary);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--op-accent);
  text-decoration: none;
  transition: color var(--op-dur-fast) var(--op-ease);
}
a:hover { color: #7DD9FF; }

::selection { background: rgba(46,197,255,0.3); color: #fff; }

.op-eyebrow {
  font-family: var(--op-font-body);
  font-size: var(--op-text-xs);
  font-weight: 600;
  letter-spacing: var(--op-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--op-accent);
}

.op-gradient-text {
  background: var(--op-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.op-container {
  width: 100%;
  max-width: var(--op-container);
  margin-inline: auto;
  padding-inline: var(--op-gutter);
}

@keyframes op-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}