/* Yak marketing site — colour tokens only (T592). Hex / rgb literals live here. */

:root {
/* Design Studio spec section 4 (yakplayer.com redesign) */
--color-navy: #2E3A5C;
--color-ink: #1F2640;
--color-cream: #F5F3EE;
--color-sand: #E7E3D9;
--color-orange: #F7941D;
--color-kicker: #9A5A0B;
--color-muted-fg: #3D4560;
--color-muted-mid: #C9CEDB;
--color-muted-bg: #E4E1D8;
--color-rule: #DAD5C8;
--color-chip: #8792AE;
--color-phone: #0E1220;
--color-play: #2354AB;

  /* Legacy dark marketing theme (removed in T593; vars keep styles.css compiling) */
  --bg-void: #050508;
    --bg-deep: #0a0a0f;
    --bg-elevated: #12121a;
    --bg-surface: #0e0e14;
    --bg-glass: rgba(18, 18, 26, 0.72);
    --bg-glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #f4f4f7;
    --text-secondary: #a1a1aa;
    --text-muted: rgba(244, 244, 248, 0.42);
  --cta: var(--color-orange);
  --cta-hover: var(--color-kicker);
    --cobalt: #3b82f6;
    --cobalt-glow: rgba(59, 130, 246, 0.5);
    --pink: #ec4899;
    --pink-glow: rgba(236, 72, 153, 0.45);
    --coral: #f97316;
    --radius-button: 12px;
    --radius-chip: 99px;
    --radius-step: 0;
    --radius-sm: var(--radius-button);
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    /* Phone mockup — layout tilt (frame chrome lives on .dev in styles.css, T602) */
    --phone-frame-radius: 28px;
    --phone-screen-radius: 20px;
    --phone-frame-radius-sm: 26px;
    --phone-screen-radius-sm: 18px;
    --device-bg: #0e1220;
    --device-screen-bg: #070a12;
    --device-rim: #3b4463;
    --device-button: #2a3150;
    --device-shadow:
      inset 0 0 0 1.5px var(--device-rim),
      18px 28px 50px -22px rgba(10, 14, 30, 0.55),
      4px 6px 14px -6px rgba(10, 14, 30, 0.35);
    --device-shadow-active:
      inset 0 0 0 1.5px var(--device-rim),
      18px 32px 56px -20px rgba(10, 14, 30, 0.6),
      6px 10px 18px -6px rgba(10, 14, 30, 0.4);
    --hero-play-thumb-ring: 0 0 0 1px rgba(10, 14, 30, 0.35);
    --phone-tilt: rotate(3deg);
    --phone-tilt-sm: rotate(1.5deg);
    --phone-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 10px 20px rgba(0, 0, 0, 0.28),
      0 28px 56px rgba(0, 0, 0, 0.48);
    --phone-shadow-lift:
      0 0 0 1px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 28px rgba(0, 0, 0, 0.32),
      0 36px 72px rgba(0, 0, 0, 0.55);
    --store-badge-width: 232px;
    --store-badge-height: 90px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --header-h: 80px;

    /* T594 — spacing, grid, section rhythm (spec section 4) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;
    --space-10: 80px;
    --space-11: 88px;
    --space-12: 96px;

    --container-max: 1200px;
    --container-gutter: var(--space-3);
    --grid-cols: 12;
    --grid-gap: var(--space-4);

    --section-pad-y: var(--space-8);
    --hero-pad-top: var(--space-4);
    --privacy-pad-top: 144px;

    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* Derived literals previously hard-coded in styles.css */
    --legacy-color-001: #fff;
    --legacy-color-002: rgba(255, 255, 255, 0.04);
    --legacy-color-003: rgba(255, 255, 255, 0.08);
    --legacy-color-004: rgba(255, 255, 255, 0.2);
    --legacy-color-005: rgba(0, 0, 0, 0.35);
    --legacy-color-006: rgba(0, 0, 0, 0.45);
    --legacy-color-007: rgba(7, 7, 11, 0.72);
    --legacy-color-008: rgba(7, 7, 11, 0.8);
    --legacy-color-009: rgba(244, 244, 247, 0.45);
    --legacy-color-010: rgba(0, 0, 0, 0.5);
    --legacy-color-011: rgba(5, 5, 8, 0.97);
    --legacy-color-013: rgba(59, 130, 246, 0.12);
    --legacy-color-018: #2c2c34;
    --legacy-color-019: #16161c;
    --legacy-color-020: #0b0b0f;
    --legacy-color-021: rgba(255, 255, 255, 0.12);
    --legacy-color-022: #050508;
    --legacy-color-023: #1c1c24;
    --legacy-color-024: rgba(255, 255, 255, 0.06);
    --legacy-color-025: rgba(255, 255, 255, 0.1);
    --legacy-color-026: #000;
    --legacy-color-027: rgba(167, 139, 250, 0.55);
    --legacy-color-030: rgba(236, 72, 153, 0.42);
    --legacy-color-031: rgba(129, 140, 248, 0.45);
    --legacy-color-035: rgba(255,255,255,0.4);
    --legacy-color-038: rgba(255, 255, 255, 0.14);
    --legacy-color-039: rgba(255, 255, 255, 0.02);
    --legacy-color-041: rgba(255, 255, 255, 0.32);
    --legacy-color-043: rgba(255,255,255,0.04);
    --legacy-color-045: #1a1030;
    --legacy-color-046: #0a0a0f;
    --legacy-color-047: rgba(0,0,0,0.4);
    --legacy-color-048: rgba(255,255,255,0.08);
    --legacy-color-049: rgba(255,255,255,0.1);
    --legacy-color-050: rgba(255,255,255,0.15);
    --legacy-color-051: rgba(0,0,0,0.6);
    --legacy-color-052: #86efac;
    --legacy-color-053: rgba(255,255,255,0.06);
    --legacy-color-054: rgba(255,255,255,0.2);
    --legacy-color-055: rgba(249, 115, 22, 0.1);
    --legacy-color-056: rgba(249, 115, 22, 0.3);
    --legacy-color-057: #fdba74;
    --legacy-color-058: #e9d5ff;
    --legacy-color-059: rgba(0, 0, 0, 0.3);
}