:root {
  /* Color — 90% restraint, 10% impact */
  --ss-white:         #F7F7F5;
  --ss-black:          #0D0D0D;
  --ss-gray:           #8A8A85;
  --ss-gray-line:      #D8D8D4;
  --ss-gray-line-dark: #2A2A2A;
  --ss-accent:         #0038FF;
  --ss-accent-dim:      #0038FF1A;
  --ss-white-70:       #F7F7F5B3;

  /* Typography */
  --font-display: 'Instrument Sans', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;

  --text-display-xl: clamp(3rem, 9vw, 9rem);
  --text-display-lg: clamp(2.5rem, 6vw, 5.5rem);
  --text-display-md: clamp(1.75rem, 3.5vw, 3rem);
  --text-body-lg:     clamp(1.125rem, 1.5vw, 1.375rem);
  --text-body:        1rem;
  --text-label:        0.75rem;

  /* Motion */
  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      600ms;
  --dur-cinematic: 900ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* Cursor label used by [data-ss-cursor-label] elements — see interactions.js */
.ss-cursor-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-accent);
  white-space: nowrap;
}

/* Rectangular, no-pill CTA base — sections extend this, never use rounded SaaS buttons */
.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--ss-gray-line);
  border-radius: 0 !important;
  color: var(--ss-black);
  padding: 12px 20px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.ss-btn:hover {
  border-color: var(--ss-accent);
  color: var(--ss-accent);
}

/* Use on dark (black) section backgrounds */
.ss-btn--invert {
  border-color: var(--ss-gray-line-dark);
  color: var(--ss-white);
}
.ss-btn--invert:hover {
  border-color: var(--ss-accent);
  color: var(--ss-accent);
}