/* Mobile Square — Color tokens
   Signature: electric yellow (#F2ED00) as the singular pop accent, on an
   ink/near-black + warm off-white ("paper") base. Semantics kept minimal:
   green (in-stock), red (sale/hot), blue (info) — used sparingly. */
:root {
  /* ---- Brand: Electric Yellow (the "signal") ---- */
  --ms-yellow-50:  #FCFBE0;
  --ms-yellow-100: #F8F5A8;
  --ms-yellow-200: #F5F066;
  --ms-yellow-300: #F3EE3B;
  --ms-yellow-400: #F2ED00;  /* core brand yellow */
  --ms-yellow-500: #F2ED00;  /* alias of core (primary swatch) */
  --ms-yellow-600: #D6D200;  /* hover */
  --ms-yellow-700: #ABA800;  /* pressed */
  --ms-yellow-800: #807D00;
  --ms-yellow-900: #565400;

  /* ---- Campaign accent: Premium Gold ----
     Used ONLY in seasonal "Apple Fest" style promo creatives (black + gold,
     dramatic product shots). NOT a core UI color — yellow stays primary. */
  --ms-gold-300: #E7C86A;
  --ms-gold-500: #C9A227;
  --ms-gold-700: #9A7A18;
  --gradient-gold: linear-gradient(135deg, #F6DE8A 0%, #C9A227 46%, #8C6A12 100%); /* @kind other */

  /* ---- Ink / neutral ramp (near-black → light) ---- */
  --ms-ink-950: #060607;
  --ms-ink-900: #0B0B0D;  /* primary ink + dark surfaces */
  --ms-ink-800: #16161A;
  --ms-ink-700: #232329;
  --ms-ink-600: #35353D;
  --ms-ink-500: #55555F;
  --ms-ink-400: #7C7C87;
  --ms-ink-300: #A8A8B2;
  --ms-ink-200: #CFCFD5;
  --ms-ink-150: #E0E0E4;
  --ms-ink-100: #EAEAED;
  --ms-ink-50:  #F3F3F4;

  /* ---- Paper (warm-neutral off-whites) ---- */
  --ms-paper:        #F5F5F1;  /* page background */
  --ms-paper-raised: #FFFFFF;  /* card / raised surface */
  --ms-paper-sunken: #ECECE6;  /* wells, inset areas */

  /* ---- Semantic hues (sparing) ---- */
  --ms-green-500:  #12A150;  --ms-green-100: #D6F2E1;  --ms-green-700: #0B7A3B;
  --ms-red-500:    #E5342A;  --ms-red-100:   #FBDAD7;  --ms-red-700:   #B4241C;
  --ms-blue-500:   #2E6BFF;  --ms-blue-100:  #DCE7FF;  --ms-blue-700:  #1F4FCC;

  /* ============ SEMANTIC ALIASES ============ */
  /* text */
  --text-primary:   var(--ms-ink-900);
  --text-secondary: var(--ms-ink-500);
  --text-muted:     var(--ms-ink-400);
  --text-inverse:   #FFFFFF;
  --text-on-accent: var(--ms-ink-900);   /* black text on yellow */
  --text-on-dark:   #F4F4F1;
  --text-link:      var(--ms-ink-900);
  --text-link-hover:var(--ms-yellow-700);

  /* surfaces */
  --surface-page:    var(--ms-paper);
  --surface-card:    var(--ms-paper-raised);
  --surface-sunken:  var(--ms-paper-sunken);
  --surface-dark:    var(--ms-ink-900);
  --surface-dark-raised: var(--ms-ink-800);
  --surface-accent:  var(--ms-yellow-400);
  --surface-accent-wash: var(--ms-yellow-50);

  /* borders */
  --border-subtle:  var(--ms-ink-100);
  --border-default: var(--ms-ink-200);
  --border-strong:  var(--ms-ink-900);
  --border-accent:  var(--ms-yellow-400);

  /* accent roles */
  --accent:        var(--ms-yellow-400);
  --accent-hover:  var(--ms-yellow-600);
  --accent-press:  var(--ms-yellow-700);
  --accent-wash:   var(--ms-yellow-50);

  /* semantic states */
  --success:  var(--ms-green-500);
  --success-wash: var(--ms-green-100);
  --danger:   var(--ms-red-500);
  --danger-wash:  var(--ms-red-100);
  --info:     var(--ms-blue-500);
  --info-wash:    var(--ms-blue-100);

  /* focus */
  --focus-ring: 0 0 0 3px rgba(242, 237, 0, 0.55);
  --focus-ring-dark: 0 0 0 3px rgba(242, 237, 0, 0.7);
}

/* Dark section scope — set data-theme="dark" (or class .ms-dark) on any container
   to flip the semantic surface/text tokens for sintra-style alternating sections. */
[data-theme="dark"], .ms-dark {
  --text-primary:   #F4F4F1;
  --text-secondary: var(--ms-ink-300);
  --text-muted:     var(--ms-ink-400);
  --text-link:      #FFFFFF;
  --text-link-hover:var(--ms-yellow-400);

  --surface-page:   var(--ms-ink-900);
  --surface-card:   var(--ms-ink-800);
  --surface-sunken: var(--ms-ink-950);

  --border-subtle:  var(--ms-ink-700);
  --border-default: var(--ms-ink-600);
  --border-strong:  #FFFFFF;

  --accent-wash:    rgba(242, 237, 0, 0.12);
  --surface-accent-wash: rgba(242, 237, 0, 0.12);
}