/* Soul Matrix: design tokens (CSS custom properties)
   Generated view of design/tokens.json. World: glass-on-void, dark-only.
   Import this before any other stylesheet. */

:root {
  /* void */
  --sm-void:    #07060D;
  --sm-void-2:  #0B0A15;
  --sm-panel:   #100E1D;
  --sm-ink:     #040308;

  /* glass */
  --sm-glass:   rgba(255, 255, 255, 0.035);
  --sm-glass-2: rgba(255, 255, 255, 0.06);
  --sm-stroke:  rgba(176, 168, 224, 0.14);
  --sm-stroke-2:rgba(176, 168, 224, 0.26);

  /* text */
  --sm-text:  #ECE9FA;
  --sm-dim:   #ADA6CE;
  --sm-faint: #726C95;

  /* signature auras */
  --sm-violet: #9B8CFF;
  --sm-cyan:   #5FE9E0;
  --sm-rose:   #FF9EC4;
  --sm-amber:  #FFC46B;

  /* 8 elements */
  --sm-el-dream:  #C9A6FF;
  --sm-el-elec:   #37E0C8;
  --sm-el-fire:   #FF8A5B;
  --sm-el-light:  #EAE3FF;
  --sm-el-metal:  #9FB2C9;
  --sm-el-shadow: #8A83B8;
  --sm-el-water:  #7FC4FF;
  --sm-el-wind:   #BFE9E6;

  /* semantic (distinct from accent) */
  --sm-good: #63E6C6;
  --sm-warn: #FFC46B;
  --sm-crit: #FF7A8A;

  /* radius */
  --sm-r-sm: 10px; --sm-r-md: 14px; --sm-r-lg: 18px; --sm-r-xl: 22px; --sm-r-pill: 999px;

  /* space */
  --sm-s1: 4px; --sm-s2: 8px; --sm-s3: 12px; --sm-s4: 16px;
  --sm-s5: 24px; --sm-s6: 32px; --sm-s7: 48px; --sm-s8: 70px;

  /* type */
  --sm-font-display: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sm-font-text:    ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sm-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* motion */
  --sm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sm-t-fast: 180ms; --sm-t-base: 260ms; --sm-t-slow: 600ms;

  /* signature gradient */
  --sm-aura-gradient: linear-gradient(90deg, var(--sm-violet), var(--sm-cyan));
}

/* element -> accent helper: set data-element on an ancestor to theme a subtree */
[data-element="dream"]       { --sm-accent: var(--sm-el-dream); }
[data-element="electricity"] { --sm-accent: var(--sm-el-elec); }
[data-element="fire"]        { --sm-accent: var(--sm-el-fire); }
[data-element="light"]       { --sm-accent: var(--sm-el-light); }
[data-element="metal"]       { --sm-accent: var(--sm-el-metal); }
[data-element="shadow"]      { --sm-accent: var(--sm-el-shadow); }
[data-element="water"]       { --sm-accent: var(--sm-el-water); }
[data-element="wind"]        { --sm-accent: var(--sm-el-wind); }
:root { --sm-accent: var(--sm-violet); }