/*
 * RAYN Marketing Design System
 * Shared public-site primitives. All colour and scale decisions come from
 * tokens.css. Components are opt-in and do not restyle legacy selectors.
 */

.rayn-marketing-system {
  margin: 0;
  background: var(--rayn-bg-page);
  color: var(--rayn-text-primary);
  font-family: var(--rayn-font-sans);
  font-size: var(--rayn-type-body);
  font-synthesis: none;
  line-height: var(--rayn-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rayn-marketing-system *,
.rayn-marketing-system *::before,
.rayn-marketing-system *::after {
  box-sizing: border-box;
}

.rayn-marketing-system img,
.rayn-marketing-system video,
.rayn-marketing-system svg {
  display: block;
  max-width: 100%;
}

.rayn-marketing-system :where(a, button, input, textarea, select) {
  font: inherit;
}

.rayn-marketing-system :where([id]) {
  scroll-margin-top: 6rem;
}

.rayn-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typography */
.rayn-display-xl,
.rayn-display,
.rayn-heading-1,
.rayn-heading-2,
.rayn-heading-3,
.rayn-heading-4 {
  margin: 0;
  color: var(--rayn-text-primary);
  font-family: var(--rayn-font-sans);
  font-weight: var(--rayn-weight-medium);
  text-wrap: balance;
}

.rayn-display-xl {
  max-width: 15ch;
  font-size: var(--rayn-type-display-xl);
  line-height: var(--rayn-leading-display);
  letter-spacing: var(--rayn-tracking-tight);
}

.rayn-display {
  max-width: 17ch;
  font-size: var(--rayn-type-display);
  line-height: var(--rayn-leading-display);
  letter-spacing: var(--rayn-tracking-tight);
}

.rayn-heading-1 {
  max-width: 20ch;
  font-size: var(--rayn-type-h1);
  line-height: var(--rayn-leading-heading);
  letter-spacing: var(--rayn-tracking-heading);
}

.rayn-heading-2 {
  max-width: 22ch;
  font-size: var(--rayn-type-h2);
  line-height: var(--rayn-leading-heading);
  letter-spacing: var(--rayn-tracking-heading);
}

.rayn-heading-3 {
  font-size: var(--rayn-type-h3);
  line-height: 1.15;
  letter-spacing: var(--rayn-tracking-heading);
}

.rayn-heading-4 {
  font-size: var(--rayn-type-h4);
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.rayn-editorial {
  font-family: var(--rayn-font-editorial);
  font-weight: var(--rayn-weight-regular);
  letter-spacing: -0.025em;
}

.rayn-body-lg,
.rayn-body,
.rayn-body-sm,
.rayn-caption {
  margin: 0;
  color: var(--rayn-text-secondary);
}

.rayn-body-lg {
  max-width: var(--rayn-measure-wide);
  font-size: var(--rayn-type-body-lg);
  line-height: 1.55;
}

.rayn-body {
  max-width: var(--rayn-measure-prose);
  font-size: var(--rayn-type-body);
  line-height: var(--rayn-leading-body);
}

.rayn-body-sm {
  max-width: var(--rayn-measure-prose);
  font-size: var(--rayn-type-body-sm);
  line-height: 1.55;
}

.rayn-caption,
.rayn-meta {
  color: var(--rayn-text-muted);
  font-size: var(--rayn-type-caption);
  line-height: var(--rayn-leading-compact);
}

.rayn-eyebrow,
.rayn-overline {
  margin: 0;
  color: var(--rayn-text-signal);
  font-size: var(--rayn-type-eyebrow);
  font-weight: var(--rayn-weight-semibold);
  letter-spacing: var(--rayn-tracking-label);
  line-height: 1.35;
  text-transform: uppercase;
}

.rayn-prose {
  width: min(100%, var(--rayn-measure-prose));
}

.rayn-prose > * + * {
  margin-top: var(--rayn-space-5);
}

/* Layout */
.rayn-container,
.rayn-container--narrow,
.rayn-container--wide {
  width: calc(100% - (2 * var(--rayn-container-gutter)));
  margin-inline: auto;
}

.rayn-container { max-width: var(--rayn-container-default); }
.rayn-container--narrow { max-width: var(--rayn-container-narrow); }
.rayn-container--wide { max-width: var(--rayn-container-wide); }

.rayn-grid {
  display: grid;
  gap: clamp(var(--rayn-space-5), 3vw, var(--rayn-space-7));
}

.rayn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rayn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rayn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rayn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rayn-stack-gap, var(--rayn-space-5));
}

.rayn-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rayn-cluster-gap, var(--rayn-space-3));
}

/* Sections */
.rayn-section {
  position: relative;
  padding-block: var(--rayn-section-md);
  background: var(--rayn-bg-page);
  color: var(--rayn-text-primary);
}

.rayn-section--compact { padding-block: var(--rayn-section-sm); }
.rayn-section--spacious { padding-block: var(--rayn-section-lg); }
.rayn-section--subtle { background: var(--rayn-bg-subtle); }
.rayn-section--dark { background: var(--rayn-bg-page); }
.rayn-section--signal { background: var(--rayn-bg-signal); }

/* Buttons and links */
.rayn-button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rayn-space-2);
  padding: 0 var(--rayn-space-5);
  border: var(--rayn-border-width) solid transparent;
  border-radius: var(--rayn-radius-sm);
  background: var(--rayn-action-primary-bg);
  color: var(--rayn-action-primary-text);
  font-size: 0.9375rem;
  font-weight: var(--rayn-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--rayn-duration-normal) var(--rayn-ease-standard),
    border-color var(--rayn-duration-normal) var(--rayn-ease-standard),
    color var(--rayn-duration-normal) var(--rayn-ease-standard),
    transform var(--rayn-duration-fast) var(--rayn-ease-standard);
}

.rayn-button:hover { background: var(--rayn-action-primary-hover); }
.rayn-button:active { transform: translateY(1px); }
.rayn-button:focus-visible,
.rayn-link:focus-visible,
.rayn-card--interactive:focus-visible,
.rayn-input:focus-visible,
.rayn-textarea:focus-visible,
.rayn-select:focus-visible,
.rayn-chip:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rayn-focus-ring) 38%, transparent);
  outline-offset: 3px;
}

.rayn-button:disabled,
.rayn-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.rayn-button--secondary {
  border-color: var(--rayn-action-secondary-border);
  background: var(--rayn-action-secondary-bg);
  color: var(--rayn-action-secondary-text);
}

.rayn-button--secondary:hover {
  border-color: var(--rayn-text-primary);
  background: color-mix(in srgb, var(--rayn-text-primary) 5%, transparent);
}

.rayn-button--inverse {
  background: var(--rayn-bg-inverse);
  color: var(--rayn-text-inverse);
}

.rayn-button--quiet {
  min-height: 2.75rem;
  padding-inline: var(--rayn-space-3);
  background: transparent;
  color: var(--rayn-text-primary);
}

.rayn-button--quiet:hover {
  background: color-mix(in srgb, var(--rayn-text-primary) 6%, transparent);
}

.rayn-button--sm { min-height: 2.75rem; padding-inline: var(--rayn-space-4); }
.rayn-button--lg { min-height: 3.25rem; padding-inline: var(--rayn-space-6); }
.rayn-button--icon { width: 3rem; padding: 0; }

.rayn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rayn-space-2);
  color: var(--rayn-text-primary);
  font-weight: var(--rayn-weight-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.rayn-link:hover { color: var(--rayn-text-signal); }
.rayn-link--muted { color: var(--rayn-text-secondary); }
.rayn-link--inverse { color: var(--rayn-text-inverse); }
.rayn-link--arrow::after {
  content: "→";
  transition: transform var(--rayn-duration-normal) var(--rayn-ease-out);
}
.rayn-link--arrow:hover::after { transform: translateX(0.18rem); }

/* Surfaces */
.rayn-card,
.rayn-surface,
.rayn-product-canvas,
.rayn-media-frame {
  border: var(--rayn-border-width) solid var(--rayn-border-subtle);
  background: var(--rayn-bg-elevated);
  color: var(--rayn-text-primary);
}

.rayn-card {
  padding: clamp(var(--rayn-space-5), 3vw, var(--rayn-space-7));
  border-radius: var(--rayn-radius-md);
}

.rayn-card--interactive {
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--rayn-duration-normal) var(--rayn-ease-standard),
    box-shadow var(--rayn-duration-normal) var(--rayn-ease-standard),
    transform var(--rayn-duration-normal) var(--rayn-ease-out);
}

.rayn-card--interactive:hover {
  border-color: var(--rayn-border-strong);
  box-shadow: var(--rayn-shadow-sm);
  transform: translateY(-2px);
}

.rayn-card--flat { box-shadow: none; }
.rayn-card--dark {
  --rayn-bg-elevated: var(--rayn-carbon);
  --rayn-text-primary: var(--rayn-porcelain);
  --rayn-text-secondary: color-mix(in srgb, var(--rayn-porcelain) 72%, transparent);
  --rayn-text-muted: color-mix(in srgb, var(--rayn-porcelain) 54%, transparent);
  --rayn-border-subtle: color-mix(in srgb, var(--rayn-porcelain) 13%, transparent);
  background: var(--rayn-bg-elevated);
}

.rayn-surface { border-radius: var(--rayn-radius-sm); }

.rayn-product-canvas {
  overflow: hidden;
  border-radius: var(--rayn-radius-lg);
  box-shadow: var(--rayn-shadow-md);
}

.rayn-media-frame {
  overflow: hidden;
  border-radius: var(--rayn-radius-lg);
  background: var(--rayn-bg-subtle);
}

.rayn-media-frame > :where(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Labels, badges and chips */
.rayn-badge,
.rayn-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--rayn-space-2);
  min-height: 2rem;
  padding: 0 var(--rayn-space-3);
  border: var(--rayn-border-width) solid var(--rayn-border-subtle);
  border-radius: var(--rayn-radius-pill);
  font-size: var(--rayn-type-caption);
  font-weight: var(--rayn-weight-semibold);
  line-height: 1;
}

.rayn-badge--signal {
  border-color: color-mix(in srgb, var(--rayn-signal-dark) 25%, transparent);
  background: var(--rayn-signal-mist);
  color: var(--rayn-signal-deep);
}

.rayn-badge--amber {
  border-color: color-mix(in srgb, var(--rayn-amber-dark) 22%, transparent);
  background: var(--rayn-amber-mist);
  color: var(--rayn-amber-dark);
}

.rayn-badge--neutral { background: var(--rayn-bg-subtle); }

.rayn-chip {
  min-height: 2.5rem;
  background: var(--rayn-bg-elevated);
  color: var(--rayn-text-secondary);
  cursor: default;
}

button.rayn-chip { cursor: pointer; }
button.rayn-chip:hover { border-color: var(--rayn-border-strong); color: var(--rayn-text-primary); }
button.rayn-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--rayn-signal-dark) 35%, transparent);
  background: var(--rayn-signal-mist);
  color: var(--rayn-signal-deep);
}

/* Forms */
.rayn-field { display: grid; gap: var(--rayn-space-2); }
.rayn-label {
  color: var(--rayn-text-primary);
  font-size: var(--rayn-type-body-sm);
  font-weight: var(--rayn-weight-semibold);
}

.rayn-input,
.rayn-textarea,
.rayn-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.75rem 0.875rem;
  border: var(--rayn-border-width) solid var(--rayn-border-strong);
  border-radius: var(--rayn-radius-sm);
  background: var(--rayn-bg-elevated);
  color: var(--rayn-text-primary);
  transition:
    border-color var(--rayn-duration-fast) var(--rayn-ease-standard),
    box-shadow var(--rayn-duration-fast) var(--rayn-ease-standard);
}

.rayn-textarea { min-height: 7rem; resize: vertical; }
.rayn-input::placeholder,
.rayn-textarea::placeholder { color: var(--rayn-text-muted); opacity: 0.8; }
.rayn-input[aria-invalid="true"],
.rayn-textarea[aria-invalid="true"],
.rayn-select[aria-invalid="true"] { border-color: var(--rayn-error); }
.rayn-input:disabled,
.rayn-textarea:disabled,
.rayn-select:disabled { opacity: 0.58; cursor: not-allowed; }

.rayn-field-help,
.rayn-field-error {
  margin: 0;
  font-size: var(--rayn-type-caption);
  line-height: var(--rayn-leading-compact);
}
.rayn-field-help { color: var(--rayn-text-muted); }
.rayn-field-error { color: var(--rayn-error); }

.rayn-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--rayn-border-subtle);
}

/* Motion */
.rayn-transition {
  transition:
    opacity var(--rayn-duration-normal) var(--rayn-ease-standard),
    transform var(--rayn-duration-normal) var(--rayn-ease-out);
}

.rayn-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--rayn-duration-slow) var(--rayn-ease-out),
    transform var(--rayn-duration-slow) var(--rayn-ease-out);
}
.rayn-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .rayn-grid--3,
  .rayn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rayn-grid--2,
  .rayn-grid--3,
  .rayn-grid--4 { grid-template-columns: 1fr; }

  .rayn-button:not(.rayn-button--quiet):not(.rayn-button--icon) {
    min-height: 3.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rayn-marketing-system *,
  .rayn-marketing-system *::before,
  .rayn-marketing-system *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .rayn-reveal { opacity: 1; transform: none; }
}