/* algoRay design tokens. Derived from assets/logo.svg (green #54C762, grey #626262). */
:root {
  /* Brand */
  --ar-green: #54c762;          /* "Ray" / the lens loop. Signal colour */
  --ar-green-bright: #7be88a;   /* glow core, hover highlights */
  --ar-green-deep: #2e8f3e;     /* pressed states, large UI only */
  --ar-grey: #626262;           /* logo grey: decorative / large shapes only (3.2:1 on stage) */

  /* Stage (dark theme is the default; the ray needs darkness to read) */
  --ar-bg: #0b0d0c;
  --ar-surface-1: #121614;
  --ar-surface-2: #1a1f1c;
  --ar-line: #262d29;
  --ar-line-strong: #36403a;

  /* Text. Contrast measured against --ar-bg */
  --ar-text: #eef2ee;           /* 17.2:1 */
  --ar-text-muted: #9aa39c;     /* 7.5:1 */
  --ar-text-faint: #6f776f;     /* 4.2:1, large text / captions only */
  --ar-on-green: #0b0d0c;       /* 9.0:1 on --ar-green */

  /* Glow / ray effects */
  --ar-ray-core: rgb(84 199 98 / 0.9);
  --ar-ray-halo: rgb(84 199 98 / 0.25);
  --ar-ray-haze: rgb(84 199 98 / 0.08);
  --ar-ray-gradient: linear-gradient(90deg, transparent, var(--ar-green) 50%, transparent);
  --ar-shadow-glow: 0 0 24px var(--ar-ray-halo), 0 0 80px var(--ar-ray-haze);

  /* Type */
  --ar-font-display: "Outfit", "Quicksand", system-ui, sans-serif; /* rounded geometric, echoes the wordmark */
  --ar-font-body: "Manrope", system-ui, sans-serif;
  --ar-font-mono: "JetBrains Mono", ui-monospace, monospace;      /* "algo" moments: labels, counters */

  --ar-text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --ar-text-sm: 0.875rem;
  --ar-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --ar-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --ar-text-xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --ar-text-2xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --ar-text-hero: clamp(3.5rem, 1.5rem + 8vw, 9rem);

  --ar-leading-tight: 0.95;
  --ar-leading-snug: 1.15;
  --ar-leading-body: 1.6;
  --ar-tracking-display: -0.03em;
  --ar-tracking-label: 0.14em;

  /* Shape: the logo is all soft, round terminals */
  --ar-radius-sm: 8px;
  --ar-radius-md: 16px;
  --ar-radius-lg: 28px;
  --ar-radius-pill: 999px;

  /* Space (8px base) */
  --ar-space-1: 0.25rem;
  --ar-space-2: 0.5rem;
  --ar-space-3: 1rem;
  --ar-space-4: 1.5rem;
  --ar-space-5: 2.5rem;
  --ar-space-6: 4rem;
  --ar-space-7: 7rem;
  --ar-space-section: clamp(6rem, 4rem + 10vw, 14rem);
  --ar-gutter: clamp(1.25rem, 4vw, 4rem);
  --ar-max-width: 1280px;

  /* Motion */
  --ar-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* default reveal */
  --ar-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* pinned/scrubbed moves */
  --ar-ease-ray: cubic-bezier(0.22, 1, 0.36, 1);      /* beam sweeps */
  --ar-dur-fast: 160ms;
  --ar-dur-base: 400ms;
  --ar-dur-slow: 900ms;
  --ar-dur-sweep: 1600ms;
  --ar-stagger: 60ms;

  /* Layers */
  --ar-z-bg: -1;
  --ar-z-content: 1;
  --ar-z-nav: 50;
  --ar-z-cursor: 90;
  --ar-z-preloader: 100;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ar-dur-fast: 0.01ms;
    --ar-dur-base: 0.01ms;
    --ar-dur-slow: 0.01ms;
    --ar-dur-sweep: 0.01ms;
    --ar-stagger: 0ms;
  }
}

/* Base */
html { background: var(--ar-bg); }
body {
  margin: 0;
  background: var(--ar-bg);
  color: var(--ar-text);
  font-family: var(--ar-font-body);
  font-size: var(--ar-text-base);
  line-height: var(--ar-leading-body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--ar-green); outline-offset: 3px; }
::selection { background: var(--ar-green); color: var(--ar-on-green); }