/* ==========================================================================
   XTedium design tokens
   Single source of truth for color, radius, and motion.
   Components must reference these tokens — no hardcoded hex.
   See XTEDIUM_WEBSITE_SPEC.md §2.1 (color), §4.2 (motion).
   ========================================================================== */

:root {
  /* Neutrals: foundation, ~90% of surfaces and text */
  --bg:        #FFFFFF; /* page + cards */
  --haze:      #F7F8FA; /* alternating section bands */
  --line:      #E6E8EC; /* hairline borders, dividers */
  --mist:      #98A1AE; /* hints, disabled, tertiary text */
  --slate:     #525A68; /* body / secondary text (WCAG AA on white) */
  --ink:       #272D38; /* primary text + headings (softened from near-black) */

  /* Indigo: links and inline accents ONLY (not buttons) */
  --indigo:        #4B3FE4; /* links, inline emphasis */
  --indigo-tint:   #EEEBFD;
  --indigo-ink:    #2A2199;

  /* Primary action color: cobalt (default). Graphite #2F3644 is a documented
     alternative — swap the button rules from --cobalt* to --graphite* to use it. */
  --cobalt:        #2D54E0; /* primary + secondary buttons */
  --cobalt-ink:    #2242C4; /* button hover / text on cobalt-tint */
  --cobalt-tint:   #E7ECFC; /* secondary button background */
  --graphite:      #2F3644; /* alternative button color */
  --graphite-ink:  #1C212B;
  --graphite-tint: #ECEEF1;

  /* AI signature gradient: reserved for the Xtolia blob + the hero "AI" word */
  --cyan:    #18C0D6;
  --grad-signature: linear-gradient(100deg, var(--indigo), var(--cyan));

  /* Interaction color: pink. ONLY appears on hover/active states. Never resting. */
  --pink:    #F5279B;

  /* Eyebrow label (monospace section kickers) */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Motion — component animation values, tunable without touching structure */
  --motion-morph-duration: 600ms;          /* 800ms = premium, 400ms = snappy */
  --motion-morph-ease: cubic-bezier(.65,0,.35,1);
  --motion-panel-fade: 350ms;
  --motion-panel-fade-delay: 280ms;
}

/* Gradient-signature text. Apply to a single emphasis word per viewport. */
.grad-text {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow label — monospace uppercase kicker above section headings. */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--indigo);
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 0.75rem;
  display: block;
}

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Accessibility: honor reduced-motion everywhere.
   Disables morph, drift, breathing, pulses, and panel transitions.
   Canvas blobs render as static flat-gradient shapes (handled in JS).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  :root {
    --motion-morph-duration: 0.001ms;
    --motion-panel-fade: 0.001ms;
    --motion-panel-fade-delay: 0ms;
  }
}