/* =========================================================
   RysUpAudio — Website Design Tokens
   Adapted from plugins' RysUpCommon DESIGN.md so product
   pages feel like the plugins themselves.

   Hybrid-friendly: pure CSS variables + BEM-ish component
   classes. No Liquid, no JS. Drop into any React/Hydrogen
   migration unchanged.
   ========================================================= */

:root {
  /* Brand */
  --rys-accent:          #E63946;
  --rys-accent-soft:     rgba(230, 57, 70, 0.18);
  --rys-accent-glow:     rgba(230, 57, 70, 0.33);

  /* Surfaces — light mode (default) */
  --rys-bg:              #f5f2ee;
  --rys-surface:         #f5f2ee;
  --rys-panel:           #efebe4;
  --rys-panel-2:         #e8e3da;
  --rys-recess:          #e5dfd4;

  /* Text */
  --rys-text:            #1a1a1a;
  --rys-text-muted:      #6b6b6b;
  --rys-text-dim:        #9a9a9a;

  /* Strokes */
  --rys-border:          rgba(0, 0, 0, 0.08);
  --rys-border-strong:   rgba(0, 0, 0, 0.14);

  /* Neumorphic shadow pairs (light) */
  --rys-nm-out:     6px 6px 12px rgba(163, 156, 143, 0.35),
                   -6px -6px 12px rgba(255, 255, 255, 0.85);
  --rys-nm-out-sm:  3px 3px 6px  rgba(163, 156, 143, 0.30),
                   -3px -3px 6px  rgba(255, 255, 255, 0.80);
  --rys-nm-in:     inset 3px 3px 6px rgba(163, 156, 143, 0.30),
                   inset -3px -3px 6px rgba(255, 255, 255, 0.80);

  /* Product card elevation */
  --rys-card-shadow:
      0 40px 55px rgba(0, 0, 0, 0.12),
      0 15px 25px rgba(0, 0, 0, 0.06);

  /* Radii */
  --rys-r-sm: 8px;
  --rys-r-md: 14px;
  --rys-r-lg: 20px;
  --rys-r-xl: 28px;

  /* Spacing */
  --rys-gap-sm: 8px;
  --rys-gap:    14px;
  --rys-gap-md: 20px;
  --rys-gap-lg: 32px;

  /* Type */
  --rys-font: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rys-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --rys-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rys-dur:  180ms;
}

.theme-dark,
[data-theme="dark"] {
  --rys-bg:              #121212;
  --rys-surface:         #1e1e1e;
  --rys-panel:           #161616;
  --rys-panel-2:         #1a1a1a;
  --rys-recess:          #0e0e0e;

  --rys-text:            #f4f1ec;
  --rys-text-muted:      #a8a39a;
  --rys-text-dim:        #6f6b63;

  --rys-border:          rgba(255, 255, 255, 0.08);
  --rys-border-strong:   rgba(255, 255, 255, 0.14);

  --rys-nm-out:     6px 6px 12px rgba(0, 0, 0, 0.55),
                   -6px -6px 12px rgba(255, 255, 255, 0.04);
  --rys-nm-out-sm:  3px 3px 6px  rgba(0, 0, 0, 0.50),
                   -3px -3px 6px  rgba(255, 255, 255, 0.03);
  --rys-nm-in:     inset 3px 3px 6px rgba(0, 0, 0, 0.55),
                   inset -3px -3px 6px rgba(255, 255, 255, 0.04);

  --rys-card-shadow:
      0 40px 55px rgba(0, 0, 0, 0.55),
      0 15px 25px rgba(0, 0, 0, 0.35);
}

/* Auto-dark via @media is intentionally disabled — the site has an
   explicit dark-mode toggle scoped to plugin product pages only.
   Other surfaces stay in their light palette regardless of the OS
   color scheme so the brand reads consistently. */

/* =========================================================
   Component primitives (BEM-ish, framework-agnostic)
   ========================================================= */

.rys-panel {
  background: var(--rys-panel);
  border-radius: var(--rys-r-lg);
  box-shadow: var(--rys-nm-out);
  padding: var(--rys-gap-lg);
  color: var(--rys-text);
}

.rys-recess {
  background: var(--rys-recess);
  border-radius: var(--rys-r-md);
  box-shadow: var(--rys-nm-in);
  padding: var(--rys-gap);
}

.rys-btn {
  font: 600 14px/1 var(--rys-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rys-text);
  background: var(--rys-panel);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: var(--rys-nm-out-sm);
  transition: box-shadow var(--rys-dur) var(--rys-ease),
              transform var(--rys-dur) var(--rys-ease);
}
.rys-btn:active { box-shadow: var(--rys-nm-in); transform: translateY(1px); }

.rys-btn--primary {
  background: var(--rys-accent);
  color: #fff;
  box-shadow: 0 6px 14px var(--rys-accent-soft),
              0 2px 4px rgba(0, 0, 0, 0.15);
}
.rys-btn--primary:hover { filter: brightness(1.05); }
.rys-btn--primary:active { transform: translateY(1px); filter: brightness(0.95); }

.rys-eyebrow {
  font: 600 12px/1 var(--rys-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rys-accent);
}

.rys-h1 { font: 700 clamp(40px, 6vw, 72px)/1.02 var(--rys-font); letter-spacing: -0.02em; margin: 0; color: var(--rys-text); }
.rys-h2 { font: 700 clamp(28px, 3.6vw, 44px)/1.1 var(--rys-font); letter-spacing: -0.015em; margin: 0; color: var(--rys-text); }
.rys-lede { font: 400 clamp(16px, 1.6vw, 20px)/1.5 var(--rys-font); color: var(--rys-text-muted); margin: 0; }