/* ============================================================
   AUDIOSHRED — Design Tokens
   Значения = KONSTRUKT-WEB/products/product.css (карта вселенной, DRIFT).
   Имена оставлены в словаре приложений (--ink/--line/--bg-card), чтобы
   shell.css и инструменты лаборатории работали без правок.
   ============================================================ */

:root,
[data-theme="light"] {
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-alt: #f6f6f7;
  --surface: #ffffff;
  --line: rgba(0, 0, 0, 0.10);
  --line-bright: rgba(0, 0, 0, 0.20);
  --fill: rgba(0, 0, 0, 0.04);
  --fill-2: rgba(0, 0, 0, 0.07);
  --ink: #0b0b0c;
  --ink-dim: #6c6c72;
  --ink-faint: #a6a6ad;
  --invert-fg: #ffffff;
  --accent: #0b0b0c;

  --hero-bg: #0b0b0c;
  --hero-bg-2: #1a1a1a;
  --hero-ink: #f4f4f5;
  --hero-ink-dim: #a2a2a8;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.07), 0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);

  --grain-opacity: .10;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='1' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.7' intercept='-1.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --bg-card: #232325;
  --bg-alt: #202021;
  --surface: #232325;
  --line: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.26);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.09);
  --ink: #f4f4f5;
  --ink-dim: #a2a2a8;
  --ink-faint: #6b6b71;
  --invert-fg: #0b0b0c;
  --accent: #f4f4f5;

  --hero-bg: #232325;
  --hero-bg-2: #1a1a1a;
  --hero-ink: #f4f4f5;
  --hero-ink-dim: #a2a2a8;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.50), 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 30px rgba(0, 0, 0, 0.35);

  --grain-opacity: .14;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='1' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.7' intercept='-1.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
}

:root {
  /* словарь сайта — те же значения под именами KONSTRUKT-WEB */
  --fg: var(--ink);
  --muted: var(--ink-dim);
  --faint: var(--ink-faint);
  --border: var(--line);
  --border-strong: var(--line-bright);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --max-width: 1120px;
  --nav-height: 60px;
  --gutter: 24px;
  --gap: 18px;

  --card-radius: 18px;
  --card-pad: 22px;

  --font-display: "Poppins", "Century Gothic", "URW Gothic", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: var(--font-body);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  --grain-size: 320px 320px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Зерно поверхности — фирменный материал КОНСТРУКТа. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--grain);
  background-size: var(--grain-size);
  opacity: var(--grain-opacity);
}
body > * { position: relative; z-index: 1; }

/* Заголовки — дисплейный шрифт сайта. */
h1, h2, .brand, .rc-hero-title { font-family: var(--font-display); }

/* Halo — ахроматический, как весь бренд. */
[data-theme="light"] {
  --glow-rgb: 11, 11, 12;
  --glow-soft:   0 0 6px rgba(11, 11, 12, 0.22), 0 0 18px rgba(11, 11, 12, 0.10);
  --glow-strong: 0 0 8px rgba(11, 11, 12, 0.40), 0 0 24px rgba(11, 11, 12, 0.22), 0 0 56px rgba(11, 11, 12, 0.06);
}
[data-theme="dark"] {
  --glow-rgb: 244, 244, 245;
  --glow-soft:   0 0 6px rgba(244, 244, 245, 0.32), 0 0 18px rgba(244, 244, 245, 0.12);
  --glow-strong: 0 0 8px rgba(244, 244, 245, 0.55), 0 0 24px rgba(244, 244, 245, 0.26), 0 0 56px rgba(244, 244, 245, 0.08);
}
:root {
  --glow-rgb: 11, 11, 12;
  --glow-soft:   0 0 6px rgba(11, 11, 12, 0.22), 0 0 18px rgba(11, 11, 12, 0.10);
  --glow-strong: 0 0 8px rgba(11, 11, 12, 0.40), 0 0 24px rgba(11, 11, 12, 0.22), 0 0 56px rgba(11, 11, 12, 0.06);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow-soft); }
  50%      { box-shadow: var(--glow-strong); }
}
@keyframes blip-scale {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.is-pressing { animation: blip-scale 140ms var(--ease-spring); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.is-spinning-ring { position: relative; }
.is-spinning-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(var(--glow-rgb), 0.85), rgba(var(--glow-rgb), 0.0) 40%, rgba(var(--glow-rgb), 0.0) 60%, rgba(var(--glow-rgb), 0.85));
  mask: radial-gradient(circle, transparent calc(100% - 4px), black calc(100% - 4px));
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 4px), black calc(100% - 4px));
  animation: ring-spin 2.4s linear infinite;
}