:root {
  /* Fonts, type sizes, colors, spacing and radius come from the theme settings
     via the {% style %} block in layouts/theme.liquid. Do NOT hardcode them
     here — static values would shadow merchant selections.
     Only static, non-editable tokens live in this file. */

  --clr-black-400: #444;
  --clr-white-400: rgba(217, 217, 217, 0.4);
  --shadow-drodpown: 0px 153px 61px rgba(0, 0, 0, 0.01), 0px 86px 52px rgba(0, 0, 0, 0.05), 0px 38px 38px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1);
  --rounded-full: 100%;

  /* Brand signature: holographic wash (echoes the QuantaGram film).
     Use as a quiet background tint — never behind small body text on its own. */
  --grad-holo: linear-gradient(120deg, #E9E6FB 0%, #DEEEF7 36%, #E4F3EC 64%, #F8E7DB 100%);
  --grad-holo-dark: linear-gradient(120deg, #1A2340 0%, #16304A 45%, #1C3A3A 75%, #3A2A2A 100%);

  /* Buttons — one system: pill primary / outline secondary / text link */
  --btn-radius: 999px;
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-padding-x: 28px;
  --btn-font-size: 15px;
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.01em;

  /* Surfaces */
  --card-radius: 16px;
  --input-radius: 12px;
  --border-subtle: rgba(28, 47, 86, 0.1);
  --shadow-soft: 0 1px 2px rgba(28, 47, 86, 0.04), 0 8px 24px rgba(28, 47, 86, 0.06);
}