/*
 * RAYN Marketing Design System
 * Phase 1: foundations and semantic tokens
 *
 * Scope: public marketing surfaces only. Do not reuse these unprefixed in the
 * authenticated operator application or booking widget.
 *
 * Breakpoint guidance (components remain fluid between these points):
 * compact <= 560px | tablet <= 960px | desktop > 960px
 */

:root {
  color-scheme: light;

  /* Typography */
  --rayn-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --rayn-font-editorial: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --rayn-type-display-xl: clamp(3.25rem, 7vw, 6rem);
  --rayn-type-display: clamp(2.75rem, 5.5vw, 4.75rem);
  --rayn-type-h1: clamp(2.5rem, 4.6vw, 4rem);
  --rayn-type-h2: clamp(2.1rem, 3.8vw, 3.25rem);
  --rayn-type-h3: clamp(1.65rem, 2.5vw, 2.25rem);
  --rayn-type-h4: clamp(1.25rem, 1.8vw, 1.5rem);
  --rayn-type-body-lg: clamp(1.125rem, 1.35vw, 1.375rem);
  --rayn-type-body: clamp(1rem, 1.05vw, 1.125rem);
  --rayn-type-body-sm: 0.9375rem;
  --rayn-type-caption: 0.8125rem;
  --rayn-type-eyebrow: 0.75rem;

  --rayn-weight-regular: 400;
  --rayn-weight-medium: 500;
  --rayn-weight-semibold: 600;

  --rayn-leading-display: 0.98;
  --rayn-leading-heading: 1.08;
  --rayn-leading-body: 1.62;
  --rayn-leading-compact: 1.42;

  --rayn-tracking-tight: -0.035em;
  --rayn-tracking-heading: -0.022em;
  --rayn-tracking-normal: 0;
  --rayn-tracking-label: 0.12em;

  --rayn-measure-prose: 42rem;
  --rayn-measure-wide: 52rem;

  /* Core palette */
  --rayn-ink: #0b0d0c;
  --rayn-carbon: #151816;
  --rayn-graphite: #252925;
  --rayn-porcelain: #f6f5f1;
  --rayn-paper: #ffffff;
  --rayn-stone: #d9dad5;
  --rayn-stone-soft: #e9e9e5;
  --rayn-slate: #6f746f;
  --rayn-slate-dark: #4e534f;

  /* Intelligence palette */
  --rayn-signal: #4ed1a0;
  --rayn-signal-dark: #207a5b;
  --rayn-signal-deep: #155440;
  --rayn-signal-mist: #e6f7f0;

  /* Hospitality and revenue palette */
  --rayn-amber: #d6a85f;
  --rayn-amber-dark: #805f2d;
  --rayn-amber-mist: #f6ebdd;

  /* Status palette */
  --rayn-success: #1f7a59;
  --rayn-success-mist: #e7f5ee;
  --rayn-warning: #8a641f;
  --rayn-warning-mist: #fbf1da;
  --rayn-error: #a53b37;
  --rayn-error-mist: #fae9e7;
  --rayn-info: #365f91;
  --rayn-info-mist: #e8eff8;

  /* Semantic light theme */
  --rayn-bg-page: var(--rayn-porcelain);
  --rayn-bg-elevated: var(--rayn-paper);
  --rayn-bg-subtle: #efefeb;
  --rayn-bg-inverse: var(--rayn-ink);
  --rayn-bg-signal: var(--rayn-signal-mist);

  --rayn-text-primary: var(--rayn-ink);
  --rayn-text-secondary: var(--rayn-slate-dark);
  --rayn-text-muted: var(--rayn-slate);
  --rayn-text-inverse: var(--rayn-porcelain);
  --rayn-text-signal: var(--rayn-signal-dark);
  --rayn-text-revenue: var(--rayn-amber-dark);

  --rayn-border-subtle: color-mix(in srgb, var(--rayn-ink) 11%, transparent);
  --rayn-border-strong: color-mix(in srgb, var(--rayn-ink) 22%, transparent);
  --rayn-focus-ring: var(--rayn-signal-dark);

  --rayn-action-primary-bg: var(--rayn-ink);
  --rayn-action-primary-text: var(--rayn-porcelain);
  --rayn-action-primary-hover: var(--rayn-graphite);
  --rayn-action-secondary-bg: transparent;
  --rayn-action-secondary-text: var(--rayn-ink);
  --rayn-action-secondary-border: var(--rayn-border-strong);

  /* Spacing */
  --rayn-space-1: 0.25rem;
  --rayn-space-2: 0.5rem;
  --rayn-space-3: 0.75rem;
  --rayn-space-4: 1rem;
  --rayn-space-5: 1.5rem;
  --rayn-space-6: 2rem;
  --rayn-space-7: 3rem;
  --rayn-space-8: 4rem;
  --rayn-space-9: 6rem;
  --rayn-space-10: 8rem;
  --rayn-space-11: 10rem;

  --rayn-section-sm: clamp(3rem, 6vw, 5rem);
  --rayn-section-md: clamp(4.5rem, 8vw, 7.5rem);
  --rayn-section-lg: clamp(6rem, 11vw, 10rem);
  --rayn-section-xl: clamp(7.5rem, 14vw, 12.5rem);

  /* Layout */
  --rayn-container-narrow: 44rem;
  --rayn-container-default: 76rem;
  --rayn-container-wide: 96rem;
  --rayn-container-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Shape */
  --rayn-radius-sm: 0.5rem;
  --rayn-radius-md: 0.875rem;
  --rayn-radius-lg: 1.25rem;
  --rayn-radius-pill: 999px;

  /* Borders and elevation */
  --rayn-border-width: 1px;
  --rayn-shadow-sm: 0 10px 28px rgba(11, 13, 12, 0.06);
  --rayn-shadow-md: 0 20px 60px rgba(11, 13, 12, 0.09);
  --rayn-shadow-lg: 0 32px 90px rgba(11, 13, 12, 0.13);

  /* Motion */
  --rayn-duration-fast: 140ms;
  --rayn-duration-normal: 220ms;
  --rayn-duration-slow: 420ms;
  --rayn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rayn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --rayn-z-base: 0;
  --rayn-z-raised: 10;
  --rayn-z-sticky: 100;
  --rayn-z-overlay: 500;
  --rayn-z-modal: 1000;
}

/* Semantic inverse theme. Components consume the same aliases in both modes. */
.rayn-theme-dark,
.rayn-section--dark {
  color-scheme: dark;
  --rayn-bg-page: var(--rayn-ink);
  --rayn-bg-elevated: var(--rayn-carbon);
  --rayn-bg-subtle: var(--rayn-graphite);
  --rayn-bg-inverse: var(--rayn-porcelain);
  --rayn-bg-signal: color-mix(in srgb, var(--rayn-signal) 12%, var(--rayn-carbon));

  --rayn-text-primary: var(--rayn-porcelain);
  --rayn-text-secondary: color-mix(in srgb, var(--rayn-porcelain) 76%, transparent);
  --rayn-text-muted: color-mix(in srgb, var(--rayn-porcelain) 58%, transparent);
  --rayn-text-inverse: var(--rayn-ink);
  --rayn-text-signal: var(--rayn-signal);
  --rayn-text-revenue: var(--rayn-amber);

  --rayn-border-subtle: color-mix(in srgb, var(--rayn-porcelain) 13%, transparent);
  --rayn-border-strong: color-mix(in srgb, var(--rayn-porcelain) 25%, transparent);
  --rayn-focus-ring: var(--rayn-signal);

  --rayn-action-primary-bg: var(--rayn-porcelain);
  --rayn-action-primary-text: var(--rayn-ink);
  --rayn-action-primary-hover: var(--rayn-paper);
  --rayn-action-secondary-text: var(--rayn-porcelain);
  --rayn-action-secondary-border: var(--rayn-border-strong);
}

/* Compatibility aliases for the legacy marketing layer. Migrate page by page. */
.rayn-marketing-system {
  --paper: var(--rayn-bg-page);
  --ink: var(--rayn-text-primary);
  --muted: var(--rayn-text-muted);
  --line: var(--rayn-border-subtle);
  --dark: var(--rayn-bg-inverse);
  --gold: var(--rayn-amber);
  --teal: var(--rayn-signal-dark);
  --white: var(--rayn-paper);
  --wrap: min(var(--rayn-container-wide), calc(100vw - (2 * var(--rayn-container-gutter))));
  --ease: var(--rayn-ease-out);
}