/* Souci Mall — design tokens (Candy light default, Neon dark variant) */

:root {
  /* Candy light (default) */
  --sm-bg:           #FFF7F3;
  --sm-bg-alt:       #FFE8D9;
  --sm-surface:      #FFFFFF;
  --sm-surface-alt: #FFEFE5;
  --sm-ink:          #1D0A1C;
  --sm-ink-soft:     #4B2842;
  --sm-ink-muted:    #8C7184;
  --sm-line:         rgba(29,10,28,0.08);
  --sm-line-strong: rgba(29,10,28,0.14);
  --sm-accent:       #E6195C;
  --sm-accent-2:     #FF8A5B;
  --sm-accent-3:     #7A3DFF;
  --sm-accent-ink:   #FFFFFF;
  --sm-danger:       #D32F4A;
  --sm-tag:          #FFE0CC;
  --sm-card-bg:      #FFFFFF;

  --sm-display-font: "Archivo","Noto Sans SC",system-ui,sans-serif;
  --sm-body-font:    "Inter",-apple-system,"PingFang SC",system-ui,sans-serif;
  --sm-mono-font:    "JetBrains Mono",ui-monospace,monospace;
  --sm-display-weight: 800;
  --sm-display-transform: none;
  --sm-display-tracking: -0.4px;
  --sm-button-tracking: 0.2px;

  --sm-radius:      14px;
  --sm-radius-card: 18px;
  --sm-radius-pill: 999px;

  --sm-shadow-sm: 0 2px 8px rgba(29,10,28,0.05);
  --sm-shadow-md: 0 10px 30px rgba(29,10,28,0.08);
  --sm-shadow-lg: 0 40px 100px rgba(0,0,0,0.18);

  --sm-pad-x-pc:  60px;
  --sm-pad-x-mob: 16px;
  --sm-max-w:     1440px;
  --sm-nav-h:     56px;

  color-scheme: light;
}

/* Neon dark — applied when user/system picks dark */
[data-theme="dark"] {
  --sm-bg:           #0B0A0F;
  --sm-bg-alt:       #13121A;
  --sm-surface:      #1A1923;
  --sm-surface-alt: #22202D;
  --sm-ink:          #F5F3FA;
  --sm-ink-soft:     #B4B0C4;
  --sm-ink-muted:    #6F6B82;
  --sm-line:         rgba(255,255,255,0.08);
  --sm-line-strong: rgba(255,255,255,0.14);
  --sm-accent:       #B6FF3C;
  --sm-accent-2:     #FF2E78;
  --sm-accent-3:     #7C5CFF;
  --sm-accent-ink:   #0B0A0F;
  --sm-danger:       #FF5B5B;
  --sm-tag:          #22202D;
  --sm-card-bg:      #1A1923;

  --sm-display-weight: 900;
  --sm-display-transform: uppercase;
  --sm-display-tracking: 0.5px;
  --sm-button-tracking: 0.6px;

  --sm-radius:      12px;
  --sm-radius-card: 18px;

  --sm-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --sm-shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --sm-shadow-lg: 0 40px 100px rgba(0,0,0,0.6);

  color-scheme: dark;
}

/* Follow OS preference when user hasn't picked */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sm-bg:           #0B0A0F;
    --sm-bg-alt:       #13121A;
    --sm-surface:      #1A1923;
    --sm-surface-alt: #22202D;
    --sm-ink:          #F5F3FA;
    --sm-ink-soft:     #B4B0C4;
    --sm-ink-muted:    #6F6B82;
    --sm-line:         rgba(255,255,255,0.08);
    --sm-line-strong: rgba(255,255,255,0.14);
    --sm-accent:       #B6FF3C;
    --sm-accent-2:     #FF2E78;
    --sm-accent-3:     #7C5CFF;
    --sm-accent-ink:   #0B0A0F;
    --sm-danger:       #FF5B5B;
    --sm-tag:          #22202D;
    --sm-card-bg:      #1A1923;
    --sm-display-weight: 900;
    --sm-display-transform: uppercase;
    --sm-display-tracking: 0.5px;
    --sm-button-tracking: 0.6px;
    color-scheme: dark;
  }
}

/* Ensure an explicit light-theme override stays light even with OS dark */
[data-theme="light"] { color-scheme: light; }