/* rtp.sh visual tokens. Components reference these only — no hardcoded colors, type, or motion. */
@property --sh-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #0b0b12;
}
@property --sh-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f1ea;
}
@property --sh-muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #b7b3c7;
}
@property --sh-card-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #14141c;
}
@property --sh-card-border {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(255 255 255 / 0.12);
}
@property --sh-hairline {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(255 255 255 / 0.08);
}
@property --sh-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(138 136 196 / 0.32);
}

:root {
  /* Brand — graphite + violet. Logo/brand color aligned with protocol badge. */
  --sh-brand: #8b7cff;
  --sh-brand-2: #c4b5fd;
  --sh-brand-deep: #5b4fd6;
  --sh-brand-glow: #8a88c452;
  --sh-charcoal: #0b0b12;
  --sh-charcoal-2: #12121a;
  --sh-ink: #14141c;
  --sh-paper: #f4f1fb;
  --sh-paper-2: #ece8f5;
  --sh-stone: #d8d5e0;
  --sh-stone-2: #c4c0ce;
  --sh-white: #f7f5ff;
  --sh-black: #07070c;

  /* Scroll-interpolated surfaces (aliases required by the brief) */
  --sh-bg: var(--sh-charcoal);
  --sh-fg: var(--sh-white);
  --sh-muted: #b7b3c7;
  --sh-card-bg: rgb(20 20 28 / 0.72);
  --sh-card-border: rgb(255 255 255 / 0.12);
  --sh-hairline: rgb(255 255 255 / 0.08);
  --sh-glow: var(--sh-brand-glow);
  --bg: var(--sh-bg);
  --fg: var(--sh-fg);
  --card-bg: var(--sh-card-bg);
  --card-border: var(--sh-card-border);
  --card-border-hover-gradient: conic-gradient(
    from var(--sh-angle, 0deg),
    var(--sh-brand),
    var(--sh-brand-2),
    #ffffffaa,
    var(--sh-brand)
  );
  --card-pattern: url("/images/grid-pattern.svg");
  --brand-glow: var(--sh-brand-glow);

  /* Layout — breathing room, 12-col */
  --sh-max-w: 1520px;
  --sh-gutter: clamp(24px, 6vw, 120px);
  --sh-section-y: clamp(96px, 14vw, 240px);
  --sh-section-y-mobile: clamp(96px, 18vw, 120px);
  --sh-cols: 12;
  --sh-gap: var(--sh-space-4);

  /* Space scale, multiples of 8 */
  --sh-space-1: 8px;
  --sh-space-2: 16px;
  --sh-space-3: 24px;
  --sh-space-4: 32px;
  --sh-space-5: 40px;
  --sh-space-6: 48px;
  --sh-space-7: 56px;
  --sh-space-8: 64px;
  --sh-space-9: 72px;
  --sh-space-10: 80px;
  --sh-space-11: 96px;
  --sh-space-12: 120px;

  /* Type */
  --sh-font-sans: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --sh-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --sh-display-xl: clamp(64px, 9vw, 160px);
  --sh-display: clamp(40px, 5vw, 88px);
  --sh-h2: clamp(32px, 3.4vw, 56px);
  --sh-h3: clamp(22px, 2vw, 32px);
  --sh-body: clamp(16px, 1.15vw, 18px);
  --sh-small: 14px;
  --sh-caption: 12px;
  --sh-leading-display: 0.95;
  --sh-tracking-display: -0.03em;
  --text-stat: clamp(32px, 4vw, 56px);
  --text-caption: var(--sh-caption);
  --font-stat: var(--sh-font-mono);

  /* Card system — Lido / Optimism / Morpho blend */
  --radius-card-lg: 32px;
  --radius-card-md: 20px;
  --radius-card-sm: 8px;
  --card-pad: 32px;
  --card-pad-mobile: 20px;
  --card-media-ratio: 16 / 10;
  --icon-size-card: 48px;
  --icon-arrow-shift: 3px;
  --shadow-card: 0 0 0 transparent;
  --shadow-card-hover: 0 24px 80px 0 var(--sh-brand-glow);

  /* Motion — Katana + Optimism */
  --sh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sh-ease-mask: cubic-bezier(0.65, 0, 0.35, 1);
  --sh-ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);
  --sh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sh-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sh-dur-hover: 200ms;
  --sh-dur-ui: 450ms;
  --sh-dur-reveal: 900ms;
  --sh-dur-blur: 1200ms;
  --sh-dur-mask: 1800ms;
  --sh-dur-hero: 2600ms;
  --sh-stagger: 80ms;
  --sh-blur-in: 12px;
  --motion-instant: 120ms;
  --motion-fast: 200ms;
  --motion-medium: 350ms;
  --motion-slow: 600ms;
  --motion-deliberate: 900ms;
  --ease-out: var(--sh-ease-out);
  --ease-in-out: var(--sh-ease-in-out);
  --ease-drawer: var(--sh-ease-drawer);

  /* Glass (≤14px, small surfaces only) */
  --sh-glass-blur: 14px;
  --sh-glass-blur-sm: 2px;
  --sh-overlay: rgb(154 255 254 / 0.14);

  /* Container-query parallax unit */
  --cu: 1px;
  --sh-angle: 0deg;
  --d: 0ms;
  --rd: 0ms;
  --g: 0ms;

  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --sh-bg: var(--sh-paper);
  --sh-fg: var(--sh-ink);
  --sh-muted: #5c586c;
  --sh-card-bg: rgb(255 255 255 / 0.78);
  --sh-card-border: rgb(20 20 28 / 0.1);
  --sh-hairline: rgb(20 20 28 / 0.08);
  --sh-glow: rgb(138 136 196 / 0.28);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --sh-bg: var(--sh-charcoal);
  --sh-fg: var(--sh-white);
  --sh-muted: #b7b3c7;
  --sh-card-bg: rgb(20 20 28 / 0.72);
  --sh-card-border: rgb(255 255 255 / 0.12);
  --sh-hairline: rgb(255 255 255 / 0.08);
}

/* Scroll-driven interpolation. Only variables change — no layout. */
html[data-flow="scroll"] {
  animation: sh-colorflow linear both;
  animation-timeline: scroll();
  animation-range: 0% 100%;
}

@keyframes sh-colorflow {
  0%,
  12% {
    --sh-bg: #0b0b12;
    --sh-fg: #f7f5ff;
    --sh-muted: #b7b3c7;
    --sh-card-bg: rgb(20 20 28 / 0.72);
    --sh-card-border: rgb(255 255 255 / 0.12);
    --sh-hairline: rgb(255 255 255 / 0.08);
  }
  22%,
  52% {
    --sh-bg: #f3f1f8;
    --sh-fg: #14141c;
    --sh-muted: #5c586c;
    --sh-card-bg: rgb(255 255 255 / 0.84);
    --sh-card-border: rgb(20 20 28 / 0.1);
    --sh-hairline: rgb(20 20 28 / 0.08);
  }
  62%,
  78% {
    --sh-bg: #d8d5e0;
    --sh-fg: #16161d;
    --sh-muted: #4e4a5c;
    --sh-card-bg: rgb(244 241 251 / 0.7);
    --sh-card-border: rgb(20 20 28 / 0.12);
    --sh-hairline: rgb(20 20 28 / 0.1);
  }
  90%,
  100% {
    --sh-bg: #07070c;
    --sh-fg: #f7f5ff;
    --sh-muted: #b7b3c7;
    --sh-card-bg: rgb(20 20 28 / 0.72);
    --sh-card-border: rgb(255 255 255 / 0.12);
    --sh-hairline: rgb(255 255 255 / 0.08);
  }
}

@media (max-width: 768px) {
  :root {
    --sh-section-y: var(--sh-section-y-mobile);
    --card-pad: var(--card-pad-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-flow="scroll"] {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}