/*
================================================================
Space Vanta Theme 2.0
Module: DNA palette (shared tokens)
Path: public/sv-ui/dna.css
Version: SVUI-DNA-001      (public: loaded once from layout/theme.html)

Colours are read off the logo, not invented:

  faces   the steel "S" and shards go from deep gunmetal to near white
            #313540  #3f4553  #525864  #616570  #898c95
            #aeb1b9  #c1bdbe  #dbd9da  #f1edea  #fffbfa
  hairline  every face has a thin white / pale grey outline
  seam      where two faces meet the edge catches light and glows
            blue, brightest at the middle:  #7dadde -> #e5ffff -> #1d6bff
  steel blue  the small shards carry a cooler face  #485d7c  #627b99
  ground    warm off-white behind it all, kept as the page background

Each area of the store mixes them in a different proportion
(see --svd-mix-* below); components only read tokens, never hex.

    area                 warm paper   silver faces   gunmetal   blue
    cart preview            56            22           16        6
    cart page               52            22           20        6
    PDP purchase            60            24            6       10
    PDP selling points      70            20            4        6
    PDP note                44            34           16        6
    service layer           10            14           66       10
================================================================
*/

:root {
  /* gunmetal ramp */
  --svd-g950: #1f232b;
  --svd-g900: #313540;
  --svd-g800: #3f4553;
  --svd-g700: #525864;
  --svd-g600: #616570;
  --svd-g500: #898c95;
  --svd-g400: #aeb1b9;
  --svd-g300: #c1bdbe;
  --svd-g200: #dbd9da;
  --svd-g100: #f1edea;
  --svd-g50: #fffbfa;

  /* light on the edges */
  --svd-seam: #1d6bff;
  --svd-seam-hi: #4d8dff;
  --svd-edge: #7dadde;
  --svd-ice: #e5ffff;
  --svd-steel: #485d7c;
  --svd-steel-hi: #627b99;

  /* warm ground (unchanged) */
  --svd-paper: #fbf7f0;
  --svd-paper-2: #f7f2e8;
  --svd-ground: #f4eee4;
  --svd-line: #ddd6c9;
  --svd-ink: #252321;
  --svd-muted: #5f574d;

  /* faces: the same 135deg light direction as the logo */
  --svd-face-dark: linear-gradient(135deg, #313540 0%, #525864 58%, #616570 100%);
  --svd-face-deep: linear-gradient(135deg, #1f232b 0%, #313540 55%, #3f4553 100%);
  --svd-face-mid: linear-gradient(135deg, #616570 0%, #898c95 55%, #aeb1b9 100%);
  --svd-face-light: linear-gradient(135deg, #fffbfa 0%, #dbd9da 42%, #f1edea 68%, #c1bdbe 100%);
  --svd-face-soft: linear-gradient(135deg, #f7f3f0 0%, #e4e0de 55%, #efebe8 100%);
  --svd-face-steel: linear-gradient(135deg, #485d7c 0%, #627b99 100%);

  /* glowing seam: a line that is brightest in the middle */
  --svd-seam-line: linear-gradient(90deg, rgba(125, 173, 222, 0) 0%, #7dadde 28%, #e5ffff 50%, #1d6bff 72%, rgba(29, 107, 255, 0) 100%);
  --svd-seam-line-v: linear-gradient(180deg, rgba(125, 173, 222, 0) 0%, #7dadde 28%, #e5ffff 50%, #1d6bff 72%, rgba(29, 107, 255, 0) 100%);

  /* white hairline round a face */
  --svd-hair: rgba(255, 255, 255, 0.85);
  --svd-hair-dark: rgba(255, 255, 255, 0.16);
}

/* One reusable thing: a seam that is drawn in once, then rests. */
@keyframes svd-seam-in {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes svd-glint {
  0%, 62% { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}