/* =============================================================================
   Pepvela V3 color system -- LOCKED by the CEO, 2026-09-30 (color pass for the
   whole Shop V3). One system for the homepage, catalog, product pages, Vela
   Stack, header, footer, cards, buttons, states, motion and the scenes.

   Locked colors:
     deep navy base      #01021B / #080327
     violet              #5934CF
     violet hover/light  #724AD9
     lavender            #9B9AF0 / #C2C3F4
     icy cyan highlight  #76BFE6
     light surface       #F8F9FC
     light text          #F6F7FF
   White (#FFFFFF) is used only as card paper on the light surface.

   Target balance: ~70% navy, ~15% violet / lavender, ~10% white / light
   surfaces, ~5% icy cyan. No orange or amber anywhere in the interface
   (prices, dots, glows, borders, active states, accents); the reference
   scenes were cooled so no warm focal point remains (warmth survives only as
   faint natural detail inside the imagery).

   Contrast (WCAG 2.x, computed): light text on violet 7.0:1 and on violet
   hover 5.3:1 (CTAs). Violet as text on white 7.5:1 and on the light surface
   7.0:1. On the navy base: light text 19.2:1, lavender #C2C3F4 11.7:1,
   lavender #9B9AF0 8.1:1, icy cyan 10.1:1. Cyan and lavender are never small
   text on light surfaces.
   ============================================================================= */

:root {
  /* deep navy base */
  --pv-abyss:      #01021B;
  --pv-night:      #080327;

  /* violet */
  --pv-violet-600: #5934CF;   /* violet: primary action, identity */
  --pv-violet-400: #724AD9;   /* violet hover / light: glow, hover */

  /* lavender */
  --pv-periwinkle: #9B9AF0;
  --pv-lavender:   #C2C3F4;

  /* icy cyan highlight (~5%) */
  --pv-cyan:       #76BFE6;

  /* light */
  --pv-surface:    #F8F9FC;   /* light premium sections */
  --pv-text-light: #F6F7FF;   /* text on navy and on violet */
  --pv-white:      #FFFFFF;   /* card paper on the light surface only */
}

/* Role layer for V3 pages, built only from the colors above. */
:root {
  /* action */
  --v3-action: var(--pv-violet-600);
  --v3-action-hover: var(--pv-violet-400);
  --v3-action-pressed: var(--pv-violet-600);
  --v3-action-gradient: linear-gradient(135deg, var(--pv-violet-600) 0%, var(--pv-violet-400) 100%);
  --v3-action-gradient-hover: linear-gradient(135deg, var(--pv-violet-400) 0%, var(--pv-violet-400) 55%, var(--pv-periwinkle) 150%);
  --v3-on-action: var(--pv-text-light);
  --v3-accent: var(--pv-violet-400);
  --v3-focus: var(--pv-periwinkle);

  /* navy environment */
  --v3-bg-deep: var(--pv-abyss);
  --v3-bg-deep-2: var(--pv-night);
  --v3-panel: rgba(8, 3, 39, 0.72);
  --v3-panel-raised: rgba(89, 52, 207, 0.18);
  --v3-glass: rgba(8, 3, 39, 0.55);
  --v3-glass-strong: rgba(8, 3, 39, 0.82);
  --v3-on-dark: var(--pv-text-light);
  --v3-on-dark-muted: rgba(246, 247, 255, 0.74);
  --v3-on-dark-soft: rgba(246, 247, 255, 0.54);
  --v3-line-dark: rgba(194, 195, 244, 0.12);
  --v3-line-dark-strong: rgba(194, 195, 244, 0.26);
  --v3-accent-on-dark: var(--pv-periwinkle);

  /* light premium surfaces */
  --v3-surface: var(--pv-surface);
  --v3-paper: var(--pv-white);
  --v3-paper-tint: var(--pv-surface);
  --v3-paper-tint-2: linear-gradient(0deg, rgba(194, 195, 244, 0.2), rgba(194, 195, 244, 0.2)), var(--pv-surface);
  --v3-ink: var(--pv-abyss);
  --v3-ink-muted: rgba(1, 2, 27, 0.64);
  --v3-ink-soft: rgba(1, 2, 27, 0.48);
  --v3-line: rgba(1, 2, 27, 0.08);
  --v3-line-strong: rgba(1, 2, 27, 0.16);
  --v3-link: var(--pv-violet-600);
  --v3-tint: rgba(89, 52, 207, 0.08);

  /* light, shadow, depth */
  --v3-glow: 0 0 40px rgba(114, 74, 217, 0.45);
  --v3-shadow: 0 1px 2px rgba(1, 2, 27, 0.05), 0 12px 32px -14px rgba(8, 3, 39, 0.22);
  --v3-shadow-lift: 0 30px 60px -28px rgba(89, 52, 207, 0.34), 0 12px 24px -14px rgba(1, 2, 27, 0.16);
  --v3-shadow-dark: 0 24px 60px -20px rgba(1, 2, 27, 0.92);
  --v3-gradient-signal: linear-gradient(90deg, var(--pv-violet-600) 0%, var(--pv-periwinkle) 100%);
  --v3-gradient-light: linear-gradient(100deg, var(--pv-text-light) 0%, var(--pv-text-light) 40%, var(--pv-lavender) 72%, var(--pv-periwinkle) 100%);
  --v3-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --v3-ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --v3-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}